Canvasによるグラフィック描画(2) (7/7)
作成:2010-07-16 11:12
更新:2010-07-16 11:12
更新:2010-07-16 11:12
■クリッピングによるグラフィックの切り抜き
イメージなどを描画するとき、「その一部分だけを切り抜いて貼りつけたい」と思うことはよくあります。こうしたときに役立つのが「クリッピング」という機能です。
クリッピングというのは、エリア内にパスを用意し、そのパスの内部だけ描画が行われるようにするものです。パスの外側には描画されないため、パスの形に沿って切り抜いたように描くことができます。
Canvasのクリッピング機能は、「clip」というメソッドで行ないます。これは、現在コンテキストに設定されているパスをクリッピング領域に設定するものです。従って、事前にbeginPathでパスを作成しておく必要があります。パス作成後、clipを呼び出せば、クリッピングが設定されます。
下に、実際の利用例をあげておきましょう。ここでは、背景を描画後、create5StarClip関数を呼び出しています。そしてこの中で、五芒星のパスを作成してからclipしています。イメージロード後に呼び出されるdrawImg関数では、その中でcreate5StarClipを呼び出し、drawImageしています。ということは？ 五芒星のクリップが完成された後に、image1.jpgのイメージが描画されることになるわけです。その結果、星型のイメージが描かれることになります。
では、クリッピングを解除するには？ これは、実は既に説明しています。「save」と「restore」を使えばいいのです。これらはコンテキストの状況を保存するものですから、まず事前にコンテキストをsaveで保存しておき、クリッピングを設定してから描画を行った後、restoreで元に戻せばいいのです。これで、クリッピングする前の状態に戻すことができます。
クリッピングというのは、エリア内にパスを用意し、そのパスの内部だけ描画が行われるようにするものです。パスの外側には描画されないため、パスの形に沿って切り抜いたように描くことができます。
Canvasのクリッピング機能は、「clip」というメソッドで行ないます。これは、現在コンテキストに設定されているパスをクリッピング領域に設定するものです。従って、事前にbeginPathでパスを作成しておく必要があります。パス作成後、clipを呼び出せば、クリッピングが設定されます。
下に、実際の利用例をあげておきましょう。ここでは、背景を描画後、create5StarClip関数を呼び出しています。そしてこの中で、五芒星のパスを作成してからclipしています。イメージロード後に呼び出されるdrawImg関数では、その中でcreate5StarClipを呼び出し、drawImageしています。ということは？ 五芒星のクリップが完成された後に、image1.jpgのイメージが描画されることになるわけです。その結果、星型のイメージが描かれることになります。
では、クリッピングを解除するには？ これは、実は既に説明しています。「save」と「restore」を使えばいいのです。これらはコンテキストの状況を保存するものですから、まず事前にコンテキストをsaveで保存しておき、クリッピングを設定してから描画を行った後、restoreで元に戻せばいいのです。これで、クリッピングする前の状態に戻すことができます。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
function draw(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
var gr = context.createLinearGradient(0,400,300,0);
gr.addColorStop(0,'rgb(255,255,0)');
gr.addColorStop(1,'rgb(0,255,255)');
context.fillStyle = gr;
context.fillRect(0, 0, 400, 300);
image = new Image();
image.onload = function() {
drawImg(context,image);
};
image.src = "image1.jpg";
}
function drawImg(context,image){
create5StarClip(context);
context.drawImage(image,-50,-150,300,300);
}
function create5StarClip(context){
var n = 0;
var dx = 100;
var dy = 0;
var s = 150;
context.beginPath();
context.translate(100,150);
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 5 * 4;
for(var i = 0; i < 5; i++) {
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo( dx + x * s,dy + y * s);
}
context.clip();
}
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る