JavaScript: canvas で画像の特定領域を切り抜く
HTML5 Canvas API を使って、画像の特定領域を切り抜きます。(クリッピング)
クリッピングには clip() メソッドを使用します。
処理の流れとしては、「パスを作成して、clip() メソッドを指定、画像を読み込む」 という流れになります。早速サンプルを見てみましょう。
サンプルコード: 画像をクリッピングする
HTML・CSS
<canvas id="canvas"></canvas>
<style>
canvas {
border: 1px solid silver;
}
</style>
JavaScript
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
// パス
c.beginPath();
c.arc(50, 50, 50, 0, 2 * Math.PI, false);
c.stroke();
// clip
c.clip();
// Image オブジェクトを生成
var img = new Image();
img.src = '../sample/img/bg_nangoku.jpg';
// 画像読み込み終了してから描画
img.onload = function(){
c.drawImage(img, 0, 0);
}
このサンプルでは、arc() メソッドで描いた円に沿って画像をクリッピングしています。
処理は以下の3つ領域にわかれます。
- パスの作成
- clip() メソッド
- 画像読み込み
先にパスを作成することに注意してください。 その後に clip() メソッドを指定することで、作成した図形が切り抜き領域となります。