Canvas scale() metoden
Definition og brug
scale() Metode til at skale den aktuelle tegning, større eller mindre.
Bemærkninger:Hvis du skalerer tegningen, vil alle efterfølgende tegninger også blive skaleret. Positioneringen vil også blive skaleret. Hvis du skriver scale(2,2)Så vil tegningen placeres to gange så langt fra canvas' øverste venstre hjørne.
Eksempel
Eksempel 1
Tegn en rektangel, forstør til 200%, og tegn rektangel igen:
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);
Tip:Flere eksempler findes i bunden af siden.
Syntaks
context.scale(scalewidth,scaleheight);
Parameterværdi
| Parameter | Beskrivelse |
|---|---|
| scalewidth | Skaler den aktuelle tegningens bredde (1=100%, 0.5=50%, 2=200%, osv.). |
| scaleheight | Skaler den aktuelle tegningens højde (1=100%, 0.5=50%, 2=200%, osv.). |
Flere eksempler
Eksempel 2
Tegn en rektangel; forstør til 200%, tegn rektangel igen; forstør til 200%, og tegn rektangel igen; forstør til 200%, tegn rektangel igen:
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);
Browserstøtte
Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Bemærkninger:Internet Explorer 8 og tidligere versioner understøtter ikke <canvas>-elementet.
