Mga Tagubilin ng Canvas scale() Method
Paglalarawan at Paggamit
scale() Ang paraan ay i-scale ang kasalukuyang drawing, mas malaki o mas maliit.
注释：Kung iyong iyong i-scale ang drawing, ang lahat ng mga sumunod na drawing ay i-scale din. Ang lokasyon ay i-scale din. Kung iyong isulat scale(2,2)Kung magkakaroon ng ganitong sitwasyon, ang drawing ay magiging lokasyon na dalawang beses malayo sa itaas at kaliwa ng canvas.
Halimbawa
Mga Halimbawa 1
I hugis isang parihaba, palakihin sa 200%, pagkatapos ay muling hugis isang 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 Payo:Mayroon pang mas maraming halimbawa sa piling baba ng pahina.
Mga Tagubilin
context.scale(scalewidth,scaleheight);
Halaga ng Parameter
| Parameter | Paglalarawan |
|---|---|
| scalewidth | I-scale ang lapad ng kasalukuyang drawing (1=100%, 0.5=50%, 2=200%, atbp). |
| scaleheight | I-scale ang taas ng kasalukuyang drawing (1=100%, 0.5=50%, 2=200%, atbp). |
Mga mas maraming halimbawa
Mga Halimbawa 2
I hugis isang parihaba; palakihin sa 200%, muling hugis isang parihaba; palakihin sa 200%, pagkatapos ay muling hugis isang parihaba; palakihin sa 200%, muling hugis isang 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);
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> 元素。
