HTML canvas scale() metoden
Definition og brug
scale() metoden til at zoome ind på det aktuelle tegning, større eller mindre.
Bemærk:Hvis du zoomer ind på tegningen, vil alle efterfølgende tegninger også blive zoomet ind. Positioneringen vil også blive zoomet ind. Hvis du skriver scale(2,2)Så vil tegningen placeres to gange så langt væk fra canvas' øverste venstre hjørne.
Eksempel
Eksempel 1
Tegn en rektangel, zoom ind til 200%, og tegn derefter et 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 på siden af siden.
Syntaks
context.scale(scalewidth,scaleheight);
Parameterværdi
| Parameter | Beskrivelse |
|---|---|
| scalewidth | Zoom ind på bredden af det aktuelle tegning (1=100%, 0.5=50%, 2=200%, osv.). |
| scaleheight | Zoom ind på højden af det aktuelle tegning (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%, 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ærk:Internet Explorer 8 og tidligere versioner understøtter ikke <canvas>-elementet.
