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() メソッドを指定することで、作成した図形が切り抜き領域となります。

JavaScript入門