Canvas translate() -menetelmä

Määrittely ja käyttö

translate() metodi uudelleenmäärittää pöytälaatan (0,0) -sijainnin.

Huomautus:Kun kutsut menetelmiä kuten fillRect() tapaan menetelmien x ja y koordinaattien arvoon.

Kuvauksen esitys translate() metodista

Esimerkki

Piirrä suorakulmio sijainnissa (10,10), aseta uusi (0,0) -sijainti (70,70). Piirrä uusi suorakulmio (huomaa, että suorakulmio alkaa sijainnista (80,80)):

Selaimesi ei tue HTML5 canvas -tagia.

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 horisonttaisuuteen (x).
y Lisää arvo pystysuuntaan (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ä.