วิธี scale() ของ HTML canvas

การเขียนและการใช้งาน

scale() วิธีขยายหรือย่อรูปวาดปัจจุบัน

หมายเหตุ:ถ้าคุณทำการขยายหรือย่อรูปวาด ทุกภาพวาดหลังจากนั้นจะถูกขยายหรือย่อด้วย ตำแหน่งที่ตั้งอยู่ยังต้องการขยายหรือย่อด้วย scale(2,2)แล้ววาดภาพจะตั้งอยู่ที่ระยะห่างจากมุมบนซ้ายของแผ่นภาพเท่ากับสองเท่า

ตัวอย่าง

ตัวอย่าง 1

วาดสี่เหลี่ยมผืนผ้า ขยายขนาดเป็น 200% แล้ววาดสี่เหลี่ยมผืนผ้าอีกครั้ง:

เว็บเบราวเซอร์ของคุณไม่สนับสนุนแท็ก HTML5 canvas

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% แล้ววาดรูปสี่เหลี่ยมผืนผ้าอีกครั้ง:

Your browser does not support the HTML canvas tag.

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>。