ゼロからわかる現代JavaScript

ここは、ふぇりあ１６歳が不定期に連載しているオンライン小説のページです。

VNIふぇりあ16歳へ

ゼロからわかる現代JavaScript

３８．クリッピング。「canvas」

*最新のIE9が必要です。

今度は、クリッピングという、指定の領域にのみ
画像が表示されるようにしてみます。

まず、クリッピング領域を作成します。

次に、

・clip

clipメソッドを使い、クリッピングを実行します。

今回使用するソースコード

function main() {
　　//キャンバス要素の作成
　　var canvas = document.createElement("canvas");
　　//bodyに要素の追加
　　document.body.appendChild(canvas);

　　canvas.height = 300;

　　//コンテキストを取得 2dは2D描画の意味
　　var ctx = canvas.getContext("2d");

　　//矩形の描画
　　ctx.beginPath();
　　ctx.rect(10, 10, 200, 200);
　　ctx.stroke();

　　//クリッピング領域を作成
　　ctx.beginPath();
　　ctx.rect(60, 60, 100, 100);
　　//クリッピングを実行
　　ctx.clip();

　　//次にクリッピング領域に表示させる画像の処理
　　//イメージオブジェクトの作成
　　var img = Image();
　　//イメージ読み込み
　　img.src = "f_mail2.gif";

　　//画像が読み込まれたら
　　img.onload = function () {
　　//画像を五倍にして描画
　　　　ctx.drawImage(img, 40, 20, img.width * 5, img.height * 5);
}
}

そしてクリッピング領域に表示させる画像の処理を前回と同じように行います。

すると、画像がくりぬかれて表示されました。

実行結果

コラム：

クリッピングは、まずクリッピング領域を作成し、その後に表示させたいものを
描画するのがポイントです。