HTML canvas clip() method
Paglalarawan at Paggamit
clip() Ang paraan na may kakayahan na isahin ang anumang hugis at sukat mula sa orihinal na kanvas.
Mga tagubilin:Pagkatapos na isahin ang anumang lugar, ang lahat ng pagpipinta sa susunod ay limitado sa nasahiling lugar (hindi ma-access ang ibang lugar sa kanvas). Maaari mo ring isave ang kasalukuyang lugar sa kanvas sa pamamagitan ng paggamit ng save() bago gamitin ang clip() method, at irestore ito sa anumang oras sa pamamagitan ng restore() method.
Sample
Isahin ang 200*120 na rectangular na lugar mula sa kanvas. Pagkatapos, iaresto ang luntiang rectangular na lugar. Ang makikita lamang ang bahaging luntiang rectangular na lugar sa napakagamit na lugar:
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>
