Canvas clip() วิธี

คู่มืออ้างอิง Canvas

คำอธิบายและวิธีใช้

clip() วิธีตัดส่วนพื้นที่ทุกทรงและขนาดจากกระดานวาดเดิม

คำเตือน：หลังจากตัดส่วนพื้นที่บางส่วน ทุกกราฟิกที่วาดต่อมาจะถูกจำกัดในส่วนที่ตัดเอา (ไม่สามารถเข้าถึงพื้นที่อื่นบนกระดานวาด) คุณยังสามารถบันทึกพื้นที่กระดานวาดปัจจุบันด้วยวิธี save() และกู้คืนในเวลาหลังโดยวิธี restore()。

ตัวอย่าง

ตัดส่วนพื้นที่สี่เหลี่ยมกลมขนาด 200*120 พิกเซลจากกระดานวาด แล้ววาดสี่เหลี่ยมกลมสีเขียว พื้นที่สี่เหลี่ยมกลมที่ตัดเอาไปในส่วนที่ตัดเอาเท่านั้นที่เห็นได้:

เว็บเครื่องปฏิบัติการของคุณไม่สนับสนุนแท็กความน่าจะเป็นของ HTML5 canvas.

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> อิเล็กทรอนิกส์

คู่มืออ้างอิง Canvas