ตัวอย่าง
คลิปของพื้นที่สี่เหลี่ยมของ 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() | ใช่ | 9.0 | ใช่ | ใช่ | ใช่ |
ความหมายและการใช้งาน
clip() วิธีคลิปภูมิภาคของรูปร่างและขนาดจากผ้าใบเดิม
เคล็ดลับ: เมื่อถูกตัดภูมิภาคทั้งหมดวาดภาพอนาคตจะถูก จำกัด ให้ภูมิภาคตัด (ไม่สามารถเข้าถึงไปยังภูมิภาคอื่น ๆ บนผืนผ้าใบ)แต่คุณสามารถบันทึกภูมิภาคผ้าใบปัจจุบันใช้ save() วิธีการก่อนที่จะใช้ clip() วิธีการและเรียกคืน (ที่มี restore() วิธีการ) เวลาใด ๆ ในอนาคต
| ไวยากรณ์ javascript: | context.clip(); |
|---|