Méthode Canvas translate()

Définition et utilisation

translate() pour redéfinir la position (0,0) sur le canevas.

Remarque :Lorsque vous appelez des méthodes telles que fillRect() lorsque vous appelez des méthodes telles que x et y valeurs des coordonnées.

Illustration de la méthode translate()

Exemple

Tracez un rectangle à l'emplacement (10,10), et définissez la nouvelle position (0,0) à (70,70). Tracez à nouveau le rectangle (attention, maintenant le rectangle commence à dessiner à partir de l'emplacement (80,80)) :

Votre navigateur ne prend pas en charge la balise 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);

Essayez-le vous-même

Syntaxe

context.translate(x,y);

Valeur du paramètre

Paramètre Description
x Valeur ajoutée à l'axe horizontal (x).
y Valeur ajoutée à l'axe vertical (y).

Prise en charge des navigateurs

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.

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

Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.