忍者ブログ

30Mar

[PR]

Posted by in

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

11Mar

画像や図形をくり抜いて描画する。

Posted by No Name Ninja in Javascript Sample

Canvasで図形や画像をくり抜いて表示させることができます。

DEMO

  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');

  // 背景を黒で塗りつぶす
  ctx.beginPath();
  ctx.rect(0, 0, 400, 400);
  ctx.fillStyle = "rgb(0,0,0)";
  ctx.fill();
  ctx.closePath();

  // 円形のクリッピングパスを生成
  ctx.beginPath();
  ctx.arc(200, 200, 150, 0, Math.PI * 2, false);
  ctx.clip();
  
  var img = new Image();
  img.src = "./test.jpg";
  img.onload = function() {
    ctx.drawImage(img, 0, 50);
  }

clipメソッドを使用して、画像の一部を表示させることができます。

clipを解除する方法

clipをかける前にあらかじめsave。実行後にrestoreするしかないと思います。それでせっかく描画したclipが消えてしまうのが残念なところ。

DEMO
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');

  // 背景を黒で塗りつぶす
  ctx.beginPath();
  ctx.rect(0, 0, 400, 400);
  ctx.fillStyle = "rgb(0,0,0)";
  ctx.fill();
  ctx.closePath();

  //クリップ前にcontextを保存
  ctx.save();

  // 円形のクリッピングパスを生成
  ctx.beginPath();
  ctx.arc(200, 200, 150, 0, Math.PI * 2, false);
  ctx.clip();

  var img = new Image();
  img.src = "./test.jpg";
  img.onload = function() {
    ctx.drawImage(img, 0, 50);
  }

  //contextをクリップ前の状態に戻す。
  ctx.restore();

PR

Comment


Vodafone絵文字 i-mode絵文字 Ezweb絵文字