วิธี scale() ของ HTML canvas
การเขียนและการใช้งาน
scale()
วิธีขยายหรือย่อรูปวาดปัจจุบัน
หมายเหตุ:ถ้าคุณทำการขยายหรือย่อรูปวาด ทุกภาพวาดหลังจากนั้นจะถูกขยายหรือย่อด้วย ตำแหน่งที่ตั้งอยู่ยังต้องการขยายหรือย่อด้วย scale(2,2)
แล้ววาดภาพจะตั้งอยู่ที่ระยะห่างจากมุมบนซ้ายของแผ่นภาพเท่ากับสองเท่า
ตัวอย่าง
ตัวอย่าง 1
วาดสี่เหลี่ยมผืนผ้า ขยายขนาดเป็น 200% แล้ววาดสี่เหลี่ยมผืนผ้าอีกครั้ง:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.strokeRect(5,5,25,15); ctx.scale(2,2); ctx.strokeRect(5,5,25,15);
คำเตือน:เสนอแนะ: มีตัวอย่างมากมายที่ด้านล่างของหน้า
วลี
context.scale(scalewidth,scaleheight);
ค่าตัวแปร
ตัวแปร | คำอธิบาย |
---|---|
scalewidth | ย่อยาวกำหนดความกว้างของการวาดภาพปัจจุบัน (1=100%, 0.5=50%, 2=200%, ซึ่งเป็นต้น) |
scaleheight | ย่อยาวกำหนดความสูงของการวาดภาพปัจจุบัน (1=100%, 0.5=50%, 2=200%, ซึ่งเป็นต้น) |
ตัวอย่างเพิ่มเติม
ตัวอย่าง 2
วาดรูปสี่เหลี่ยมผืนผ้า; ขยายเป็น 200% แล้ววาดรูปสี่เหลี่ยมผืนผ้าอีกครั้ง; ขยายเป็น 200% แล้ววาดรูปสี่เหลี่ยมผืนผ้าอีกครั้ง; ขยายเป็น 200% แล้ววาดรูปสี่เหลี่ยมผืนผ้าอีกครั้ง:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.strokeRect(5,5,25,15); ctx.scale(2,2); ctx.strokeRect(5,5,25,15); ctx.scale(2,2); ctx.strokeRect(5,5,25,15); ctx.scale(2,2); ctx.strokeRect(5,5,25,15);
การสนับสนุนเบราซเซอร์
ตัวเลขในตารางระบุตัวเวอร์ชั่นของเบราซเซอร์ที่สนับสนุนคุณสมบัตินี้เต็มที่
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
หมายเหตุ:Internet Explorer 8 และตัวเวอร์ชั่นเก่ากว่านี้ไม่สนับสนุนสมาชิก <canvas>。