読み込んだ画像にマスクをかける(clip) [html5 の Canvas を使ってみる：第卅一回]

clip(); を使えば、illustrator のようにマスクをかけることができるらしい。以前にやった 星形をマスクに指定し、表示してみる。

★html 側

<canvas id="clip"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: clip で 2 次元描画を行うことの定義
  var c = document.getElementById("clip").getContext('2d');

// 星形で赤い星形を作る
  star(70, 70, 50, "rgb(255, 0, 0)", "rgb(255, 0, 0)", c);
// 上記の星形を clip(); として定義
  c.clip();

// drawImage(); で画像を配置
  var target = new Image();
  target.src = "DasEnde.jpg?" + new Date().getTime();
  target.onload = function() {c.drawImage(target, 30, 30);}

// 星形の function は 該当のエントリー に記載
}

すると、こうなる。


確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53

W3C；
4.8.11 The canvas element — HTML 5