HTMLキャンバス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> 要素をサポートしていません。
