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