サイト内検索

clip() メソッド

構文

context . clip()

指定のパスに追加のクリッピング領域を制約します。

仕様

clip() メソッドは、非ゼロ巻数規則を使って、現在のクリッピング領域と現在のパスで描画された領域とが重なる部分を計算して、新たなクリッピング領域を生成しなければいけません。開いたサブパスは、クリッピング領域を算出するときに、暗黙に閉じられなければいけません。実際のサブパスには影響しません。新たなクリッピング領域は、現在のクリッピング領域を置き換えます。

コンテキストが初期化されるとき、クリッピング領域は、左上端が (0,0) で座標空間の幅と高さを持つ矩形にセットされなければいけません。

原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-clip

サンプル

clip() メソッドは、呼び出される直前までに生成されたサブパスの図形で、切り取り窓がセットされると考えてください。clip() メソッドは、切り取り窓内に表示させたいものを描く前に、呼び出されなくてはいけません。

clipメソッドのサンプル 
/* 背景を黒で塗りつぶす */
ctx.beginPath();
ctx.rect(0, 0, 100, 100);
ctx.fillStyle = "rgb(0,0,0)";
ctx.fill();
/* 円形のクリッピングパスを生成 */
ctx.beginPath();
ctx.arc(50, 50, 45, 0, Math.PI * 2, false);
ctx.clip();
/* 写真を張る */
var img = new Image();
img.src = "clip_pic.png?" + new Date().getTime();
img.onload = function() {
  ctx.drawImage(img, 0, 0);
}

[clip() メソッドの実際のサンプル]

このサンプルでは、まず Canvas 全体を黒で塗りつぶします。その後、beginPath() メソッドでいったんパスを初期化してから、切り取り窓となるパスを描きます。そして clip() メソッドを呼び出すことで、切り取り窓がセットされます。それから、切り取り窓の中に表示したいものを描きます。このサンプルでは写真を張り付けています。この結果、本来はCanvas の領域すべてに写真が表示されるところが、クリッピングパスとしてセットされた切り取り窓の部分だけが表示されます。クリッピングパスの領域の外側は透明として扱われますので、結果的に、切り取り窓の外側は、一番最初に塗りつぶした背景色の黒が表示されることになります。

ブラウザ対応状況

Firefox Safari Chrome Opera IE ExplorerCanvas
2 ○ 2 ○ 1 ○ 9.2 ○ 9 ○ 0002 ×
3 ○ 3 ○ 2 ○ 9.5 ○   3 ×
3.5 ○ 4 ○ 3 ○ 10 ○    
3.6 ○ 5 ○ 6 ○ 10.60 ○    

clip() メソッドは、ExplorerCanvas では未実装となっています。そのため、clip() メソッドを ExplorerCanvas を通して Internet Explorer で実行しようとすると、無視されます。（JavaScript エラーにはなりません。）