Metodo Canvas translate()

Definizione e uso

translate() metodi per rimescolare la posizione (0,0) sul canvas.

Nota:Quando chiama metodi come fillRect() metodi come questi, i valori vengono aggiunti a x e y sul valore delle coordinate.

Illustrazione del metodo translate()

Esempio

Disegna un rettangolo in posizione (10,10), imposta la nuova posizione (0,0) a (70,70). Disegna di nuovo il nuovo rettangolo (nota che ora il rettangolo inizia a posizionarsi a (80,80)):

Il tuo browser non supporta il tag HTML5 canvas.

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 a farlo tu stesso

Sintassi

context.translate(x,y);

Valore del parametro

Parametro Descrizione
x Aggiungi il valore alla coordinate orizzontale (x).
y Aggiungi il valore alla coordinate verticale (y).

Supporto dei browser

I numeri nella tabella indicano la versione del browser che supporta per la prima volta l'attributo.

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

Nota:Internet Explorer 8 e versioni precedenti non supportano l'elemento <canvas>.