Javascriptista

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();