Canvas clip() 方法

Canvas Referans Kılavuzu

定义和用法

clip() 方法从原始画布中剪切任意形状和尺寸。

提示：一旦某个区域被剪切，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

实例

200*120 piksel genişliğinde bir矩形区域从画布中剪切。Sonra，yeşil矩形绘制。Sadece kesim区域内的yeşil矩形部分是可见的：

Tarayıcınız HTML5 canvas etiketini desteklememektedir.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// kesim矩区域
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// 在 clip() sonrası yeşil düzge çiz
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);

Kişisel olarak deneyin

Sözdizimi

context.clip();

Tarayıcı Desteği

Tablodaki numaralar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Açıklama:Internet Explorer 8 ve daha eski sürümler <canvas> elementini desteklememektedir.

Canvas Referans Kılavuzu