CanvasRenderingContext2D.rotate()
La méthode CanvasRenderingContext2D
.rotate()
de l'API
Canvas 2D ajoute une rotation à la matrice de transformation. L'argument angle représente un angle de rotation horaire et il est exprimé en radians.
Syntaxe
void ctx.rotate(angle);
Paramètres
angle
- L'angle de rotation horaire en radians. Vous pouvez utiliser
degrés * Math.PI / 180
si vous voulez faire la conversion à partir d'une valeur en degrés.
Le centre de la rotation est toujours l'origine du canevas. Pour changer le centre, il faudra déplacer le canevas en utilisant la méthode translate()
.
Exemples
Utilisation de la méthode rotate
Ceci est seulement un fragment de code simple qui utilise la méthode rotate
.
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.rotate(45 * Math.PI / 180);
ctx.fillRect(70, 0, 100, 30);
// réinitialise la matrice de transformation courante à la matrice identité
ctx.setTransform(1, 0, 0, 1, 0, 0);
Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas:
Spécifications
Spécification | Statut | Commentaire |
---|---|---|
HTML Living Standard La définition de 'CanvasRenderingContext2D.rotate' dans cette spécification. |
Standard évolutif |
Compatibilité navigateurs
BCD tables only load in the browser
Voir aussi
- L'interface la définissant,
CanvasRenderingContext2D