Kursusanbefaling:

Canvas translate() metoden

Definition og brug translate()

Bemærk:metode for at genmappere canvas' (0,0) position. Når du kalder en metode som fillRect() x og lignende metoder, vil værdierne blive tilføjet til y koordinatværdierne.

Illustration af translate() metoden

Eksempel

Tegn en rektangel på position (10,10), og sæt den nye (0,0) position til (70,70). Tegn den nye rektangel igen (bemærk, at rektanglen starter ved (80,80) denne gang):

Din browser understøtter ikke HTML5 canvas tagget.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);

Prøv det selv

Sprog

context.translate(x,y);

Parameterværdi

Parameter Beskrivelse
x Tilføj værdi til horisontal koordinat (x).
y Tilføj værdi til lodret koordinat (y).

Browserunderstøttelse

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter denne egenskab.

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.