คลิปผ้าใบ HTML () วิธีการ
คู่มือการใช้งาน HTML ผ้าใบอ้างอิง
ตัวอย่าง
ตัดพื้นที่สี่เหลี่ยม 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>
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>
ลอง»
สนับสนุนเบราว์เซอร์
Internet Explorer 9, Firefox, Opera, Chrome และ Safari สนับสนุนคลิป () วิธีการ
หมายเหตุ: 8 และรุ่นก่อนหน้าของ Internet Explorer ไม่สนับสนุน <ผ้าใบ> องค์ประกอบ
ความหมายและการใช้งาน
คลิป () วิธีการตัดรูปร่างและขนาดใด ๆ จากผ้าใบเดิม
เคล็ดลับ: เมื่อคุณตัดบางพื้นที่ทุกรูปวาดที่ตามมาจะถูก จำกัด ไปยังพื้นที่ที่จะถูกตัด (ไม่สามารถเข้าถึงพื้นที่อื่น ๆ บนผืนผ้าใบ) นอกจากนี้คุณยังสามารถใช้คลิป () วิธีการก่อน () วิธีการในพื้นที่ผืนผ้าใบในปัจจุบันที่บันทึกไว้โดยใช้บันทึกและกู้คืน (โดยเรียกคืน () วิธีการ) ในอนาคตได้ตลอดเวลา
| ไวยากรณ์ javascript: | บริบท .clip (); |
|---|
คู่มือการใช้งาน HTML ผ้าใบอ้างอิง