HTML canvas clip() yöntemi
Tanım ve Kullanım
clip() Metod, orijinal alanın herhangi bir şekil ve boyutunu keser.
İpucu:Bir alan kesildiğinde, tüm sonraki çizimler kesilmiş alanda kısıtlanır (diğer alanlara erişilemez). clip() yöntemini kullanmadan önce save() yöntemini kullanarak mevcut alanı kaydedebilir ve sonraki herhangi bir zamanda onu geri yükleyebilirsiniz (restore() yöntemi ile).
Örnek
200*120 piksel genişliğinde bir dikdörtgen alanı kesin. Daha sonra, yeşil bir dikdörtgen çizin. Yalnızca kesilmiş alanın içindeki yeşil dikdörtgen kısmı görünür:
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);
Sözdizimi
context.clip();
Tarayıcı Desteği
Tablodaki numaralar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.
| 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> ögesini desteklememektedir.
