Manuale di riferimento HTML

Completo elenco HTML

Metodo HTML canvas translate()

La funzione translate() è un metodo dell'API Canvas 2D che aggiunge una trasformazione di traslazione muovendo il canvas e l'origine del canvas in direzione orizzontale e verticale del网格.

Manuale di riferimento per HTML canvas

Esempio online

Disegna un rettangolo all'incrocio (10,10), imposta la nuova posizione (0,0) a (70,70). Disegna di nuovo lo stesso rettangolo (notare che il rettangolo inizia ora dalla posizione (80,80):

Esempio

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilizzo del metodo translate() su canvas HTML5 - Tutorial di base (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta il tag canvas HTML5.
</canvas>
<script>
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);
</script>
</body>
</html>

Prova a vedere ‹/›

Compatibilità del browser

IEFirefoxOperaChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome e Safari supportano translate() Metodi.

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

Definizione e uso

Il metodo translate() rimescola la posizione (0,0) sul canvas.

Attenzione:Quando chiami metodi come fillRect() dopo translate(), i valori vengono aggiunti alle coordinate x e y.

Sintassi JavaScript:	context.translate(x,y);

Valore del parametro

Attenzione: Puoi specificare uno o entrambi i parametri.

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

Manuale di riferimento per HTML canvas

HTML: <template> etichetta