Canvas scale() metod
Definition och användning
scale() Metoden för att skala den aktuella ritningen, 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 canvasens övre vänstra hörn.
Exempel
Exempel 1
Rita rektangeln, 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);
Tips:Mer exempel finns på sidans botten.
Syntax
context.scale(scalewidth,scaleheight);
Parametervärde
| Parameter | Beskrivning |
|---|---|
| scalewidth | Skala den aktuella ritningens bredd (1=100%, 0.5=50%, 2=200%, osv.). |
| scaleheight | Skala den aktuella ritningens höjd (1=100%, 0.5=50%, 2=200%, osv.). |
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
Tal i tabellen anger den första webbläsarversionen som helt stöder detta 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.
