ตัวอย่าง
คลิปของพื้นที่สี่เหลี่ยมของ 200 * 120 พิกเซลจากผืนผ้าใบ จากนั้นวาดรูปสี่เหลี่ยมผืนผ้าสีแดง เพียงส่วนหนึ่งของสี่เหลี่ยมสีแดงที่อยู่ภายในพื้นที่ตัดจะมองเห็นได้:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Clip a rectangular area
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);
</script> ลองตัวเอง» สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่วิธีการ
| วิธี | |||||
|---|---|---|---|---|---|
| clip() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
ความหมายและการใช้งาน
clip() วิธีคลิปภูมิภาคของรูปร่างและขนาดจากผ้าใบเดิม
Tip: เมื่อถูกตัดภูมิภาคทั้งหมดวาดภาพอนาคตจะถูก จำกัด ให้ภูมิภาคตัด (no access to other regions on the canvas) แต่คุณสามารถบันทึกภูมิภาคผ้าใบปัจจุบันใช้ save() วิธีการก่อนที่จะใช้ clip() วิธีการและเรียกคืน (with the restore() วิธีการ) เวลาใด ๆ ในอนาคต
| ไวยากรณ์ JavaScript: | context clip() ; |
|---|
<ผ้าใบวัตถุ