วิธี 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>。
