ตัวอย่าง
วาดรูปสี่เหลี่ยมผืนผ้าขนาดถึง 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);
ลองตัวเอง» สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่วิธีการ
| วิธี | |||||
|---|---|---|---|---|---|
| scale() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
ความหมายและการใช้งาน
scale() วิธีการชั่งการวาดภาพในปัจจุบันใหญ่หรือเล็ก
Note: หากคุณปรับขนาดภาพวาดภาพวาดในอนาคตทั้งหมดจะได้รับการปรับขนาด ตำแหน่งที่จะได้รับการปรับขนาด หากคุณ scale(2,2) ; ภาพวาดจะถูกวางตำแหน่งเป็นสองเท่าไกลจากด้านซ้ายและด้านบนของผ้าใบตามที่คุณระบุ
| ไวยากรณ์ JavaScript: | context scale( scalewidth,scaleheight ) ; |
|---|
ค่าพารามิเตอร์
| พารามิเตอร์ | ลักษณะ | เล่น |
|---|---|---|
| scalewidth | เครื่องชั่งความกว้างของการวาดภาพในปัจจุบัน (1=100%, 0.5=50%, 2=200%, etc.) | เล่น " |
| scaleheight | เครื่องชั่งความสูงของการวาดภาพในปัจจุบัน (1=100%, 0.5=50%, 2=200%, etc.) | เล่น " |
ตัวอย่างอื่น ๆ
ตัวอย่าง
วาดรูปสี่เหลี่ยมผืนผ้าขนาดถึง 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); ลองตัวเอง» <ผ้าใบวัตถุ