Méthode translate()
Exemple
Dessinez un rectangle à la position (10,10) et définissez la nouvelle position (0,0) à (70,70). Dessinez à nouveau le même rectangle (notez que le rectangle commence maintenant à la position (80,80) :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillRect(10, 10, 100, 50);
ctx.translate(70, 70);
ctx.fillRect(10, 10, 100, 50);
Description
La méthode translate() remappe la position (0,0) du contexte.
Remarque
Lorsque vous appelez une nouvelle méthode après translate(), les nouvelles positions sont ajoutées aux coordonnées x et y :
Voir aussi :
La méthode scale() (Mettre à l'échelle le contexte)
La méthode rotate() (Faire pivoter le contexte)
La méthode transform() (Mettre à l'échelle, faire pivoter, déplacer, incliner le contexte)
La méthode setTransform() (Mettre à l'échelle, faire pivoter, déplacer, incliner le contexte).
Syntaxe
| contexte .translate( x, y ) |
Valeurs des paramètres
Remarque : Vous pouvez spécifier un ou les deux paramètres.
| Param | Description | Jouez-le |
|---|---|---|
| x | Valeur à ajouter à la coordonnée horizontale (x) | |
| y | Valeur à ajouter à la coordonnée verticale (y) |
Valeur de retour
| AUCUN |
Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
translate() est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |