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

ツール・書籍紹介

まとめ・一覧

基本編

数値

文字列

正規表現

日付・時刻

配列

関数

オブジェクト指向

DOM操作

API

便利な小技集

用語

実践編

関連サイト