HTML canvas scale() na paraan
Paglilinaw at paggamit
scale() Paraan ng i-scale ang kasalukuyang larawan, mas malaki o mas maliit.
หมายเหตุ：Kung iyong i-scale ang larawan, ang lahat ng sumunod na pinta ay i-scale din. Ang lokasyon ay i-scale din. Kung iyong isulat scale(2,2), kaya ang larawan ay magiging lokasyon ng dalawang beses mula sa itaas at kaliwa ng pintaan.
Mga halimbawa
Halimbawa 1
Isumbong ang isang parihaba, pabigyan ng pagtaas ng 200%, at sumunod na isumbong ang parihaba:
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);
Mga tagubilin:Mayroong mas maraming halimbawa sa pahina ng ibaba.
Mga pangungusap
context.scale(scalewidth,scaleheight);
Halaga ng parametro
| Parametro | Paglalarawan |
|---|---|
| scalewidth | Tumuyak ang lapad ng kasalukuyang larawan (1=100%, 0.5=50%, 2=200%, atbp). |
| scaleheight | Tumuyak ang taas ng kasalukuyang larawan (1=100%, 0.5=50%, 2=200%, atbp). |
ตัวอย่างเพิ่มเติม
ตัวอย่าง 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> อิเล็กทรอนิกส์
