HTML canvas translate() method

Definition and Usage

translate() to remap the (0,0) position on the canvas after translate().

Huomautus:When you call methods like fillRect() methods, the value will be added to x and y on the coordinate value.

Translate() metoden kuvauksen

Example

Draw a rectangle at position (10,10), set the new (0,0) position to (70,70). Draw a new rectangle again (note that the rectangle now starts at position (80,80)):

Your browser does not support the HTML5 canvas tag.

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

Kokeile itse

Syntaksi

context.translate(x,y);

Parametrin arvo

Parametri Kuvaus
x Lisää arvo oikealle koordinaattiin (x).
y Lisää arvo ylös koordinaattiin (y).

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen täysin tukevan selaimen version.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Huomautus:Internet Explorer 8 ja aikaisemmat versiot eivät tue <canvas> elementtiä.