HTML canvas scale() metod
Definition och användning
scale() metoden för att skalera aktuellt ritbille, större eller mindre.
Kommentar:Om du skalar ritningen kommer alla efterföljande ritningar också att skalas. Positioneringen kommer också att skalas. Om du skriver scale(2,2)så kommer ritningen att placeras två gånger så långt från canvasets övre vänstra hörn.
Exempel
Exempel 1
Rita en rektangel, förstör till 200% och rita sedan en annan rektangel:
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);
Tips:Mer exempel på användning finns på sidans botten.
Syntaks
context.scale(scalewidth,scaleheight);
Parametervärde
| Parameter | Beskrivning |
|---|---|
| scalewidth | Justera aktuellt ritbils bredd (1=100%, 0.5=50%, 2=200%, och så vidare). |
| scaleheight | Justera aktuellt ritbils höjd (1=100%, 0.5=50%, 2=200%, och så vidare). |
Mer exempel
Exempel 2
Rita en rektangel; förstora till 200%, rita sedan rektangeln igen; förstora till 200%, rita sedan rektangeln igen; förstora till 200%, rita sedan rektangeln 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);
Webbläsarstöd
Numreringen i tabellen anger den första webbläsarversionen som helt stöder denna egenskap.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Kommentar:Internet Explorer 8 och tidigare versioner stöder inte <canvas>-elementet.
