HTML canvas clip() 方法
คำอธิบายและวิธีใช้
clip() วิธีเลือกใช้เลือกทรงรูปและขนาดต่างๆ ที่อยู่ในกราฟิกต้นตอน
คำเตือน：หลังจากที่ตัดส่วนบางส่วนออกมา การวาดทุกส่วนต่อไปจะถูกจำกัดอยู่ที่ส่วนที่ตัดออกมา (ไม่สามารถเข้าถึงส่วนอื่นๆ ของกราฟิกของหน้ากราฟิก) คุณยังสามารถบันทึกพื้นที่กราฟิกปัจจุบันด้วยวิธี save() ก่อนการใช้งาน clip() และฟื้นฟูเมื่อเป็นที่เหมาะสมด้วยวิธี 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>
