Canvas translate() metod

Canvas referenshandbok

Definition och användning

translate() metoder för att omkartlägga (0,0)-positionen på canvasen.

Kommentar:När du anropar metoder som fillRect() likt med metoder, läggs värden till x och y koordinatvärden.

Illustration of the translate() method

Exempel

Rita en rektangel vid position (10,10), sätt den nya (0,0)-positionen till (70,70). Rita en ny rektangel igen (notera att rektangeln börjar vid position (80,80)):

Din webbläsare stöder inte HTML5 canvas-taggen.

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);

Prova själv

Syntax

context.translate(x,y);

Parametervärde

Parameter Beskrivning
x Lägg till värde till horisontell koordinat (x).
y Lägg till värde till vertikal koordinat (y).

Webbläsarstöd

Numrerna 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 äldre versioner stöder inte <canvas>-elementet.

Canvas referenshandbok