HTML canvas translate() Metodo

❮ Riferimento tela HTML

Esempio

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

Il tuo browser non supporta il canvastag HTML5.

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

Supporto del browser

I numeri nella tabella specificano la prima versione del browser che supporta completamente il metodo.

Method
translate() Yes 9.0 Yes Yes Yes

Definizione e utilizzo

Il metodo translate() rimappa la posizione (0,0) sull'area di disegno.

Nota: quando si chiama un metodo come fillRect() dopo translate(), il valore viene aggiunto ai valori delle coordinate x e y.

Illustrazione del metodo translate()

sintassi JavaScript: contesto .translate( x,y );

Valori dei parametri

Nota: è possibile specificare uno o entrambi i parametri.

Parameter Description Play it
x The value to add to horizontal (x) coordinates
y The value to add to vertical (y) coordinates

❮ Riferimento tela HTML