Canvas clip() メソッド
定義と使用法
clip() メソッドは元のキャンバスから任意の形状とサイズのエリアを剪切します。
ヒント：あるエリアを剪切すると、その後のすべての描画は剪切されたエリア内に制限されます（キャンバス上の他のエリアにはアクセスできません）。また、clip()メソッドの前にsave()メソッドを使用して現在のキャンバスエリアを保存し、後で任意のタイミングでそれを復元することもできます（restore()メソッドを使用します）。
例
200*120ピクセルの矩形エリアをキャンバスから切り取ります。その後、緑色の矩形を描画します。切り取られたエリア内の緑色の矩形部分のみが見えます：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 剪切矩形エリア
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// 在 clip() 後で緑色の矩形を描画
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
文法
context.clip();
ブラウザのサポート
この表の数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
注記：Internet Explorer 8 以前のバージョンは <canvas> 要素をサポートしていません。
