11498 sujets

JavaScript, DOM et API Web HTML5

Rotate canvas

Pages :
Bonsoir,
Désolée si je ne suis pas au bon endroit. Je ne comprends pas comment fonctionne rotate... Je sais que c'est avec un angle, mais quand je le fais sur ce code, ça ne fait rien (je le place mal surement) 
<html>
	<body>
		<canvas id="mon_canvas" width="350" height="350"> 
			Texte alternatif pour les navigateurs ne supportant pas Canvas.
		</canvas>
		<script>
			var c = document.getElementById("mon_canvas");
			var ctx = c.getContext("2d");
			// Le reste du script ici...
			ctx.beginPath();              
ctx.lineWidth="3";
ctx.strokeStyle="black"; 
ctx.moveTo(50,50);
ctx.bezierCurveTo(300,100,100,300,300,300);
ctx.stroke();
ctx.beginPath();            
ctx.lineWidth="3";
ctx.strokeStyle="black"; 
ctx.moveTo(50,50);
ctx.quadraticCurveTo(300,100,300,300);
ctx.rotate(Math.PI);
ctx.stroke();


		</script>
    </body>
</html>


Merci d'avance
salut,
il faut déjà que tu saches que les angles sont en gradients. Pour que ça marche, il faut déclarer ta rotation avant de commencer à dessiner tes formes.

<html>
	<body>
		<canvas id="mon_canvas" width="350" height="350"> 
			Texte alternatif pour les navigateurs ne supportant pas Canvas.
		</canvas>
		<script>
			var c = document.getElementById("mon_canvas");
			var ctx = c.getContext("2d");
			// Le reste du script ici...
ctx.rotate(Math.PI);
			ctx.beginPath();              
ctx.lineWidth="3";
ctx.strokeStyle="black"; 
ctx.moveTo(50,50);
ctx.bezierCurveTo(300,100,100,300,300,300);
ctx.stroke();
ctx.beginPath();            
ctx.lineWidth="3";
ctx.strokeStyle="black"; 
ctx.moveTo(50,50);
ctx.quadraticCurveTo(300,100,300,300);
ctx.stroke();


		</script>
    </body>
</html>
Administrateur
La rotation n'est pas appliquée sur des formes une fois qu'elles sont tracées mais en amont sur le système de coordonnées. Il faut donc en effet appliquer la méthode avant moveTo/bezier/stroke/etc.

Par contre un conseil, il faut penser à faire un ctx.save() avant la transformation pour pouvoir retrouver le système de coordonnées après coup (sans rotation) avec ctx.restore()
Bonjour,

Ah d'accord merci ^^ (pour les gradients, je sais, d'où le pi ^^)
save je dois le placer où alors ?

Merci encore

Edit : Je viens de tester le code donné mais rien ne s'affiche Smiley ohwell
Modifié par Ccile13 (30 Jul 2013 - 11:09)
Cela ne marche pas car il faut aussi ajuster l'origine de la rotation. En gros, tu dois ajouter une translation à ta forme en fonction de l'angle choisi.
Dans ton cas :

ctx.translate(c.width, c.height);
ctx.rotate(Math.PI);
Gradient existe mais c'est un objet mathématiques... Et moi, j'ai juste recopié ^^

Une origine pour la rotation ? Un point autour duquel on tourne ? Parce que si c'est ça, je vois pas le lien avec la translation Smiley ohwell

Merci
Oui c'est le translate dont t'a parlé Zelalsan.

Voilà un exemple en partant de ton code :


var deg2rad = function(deg) {
 return Math.PI * deg / 180; 
}

var canvas = document.getElementById("mon_canvas");
var ctx = canvas.getContext("2d");

// centre du canvas
var cx = canvas.width / 2;
var cy = canvas.height / 2;

// place le pivot au centre
ctx.translate(cx, cy);
// rotation 90°
ctx.rotate(deg2rad(90));
// remet le pivot à l'origine
ctx.translate(-cx, -cy);

// courbe 1
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "black";
ctx.moveTo(50,50);
ctx.bezierCurveTo(300,100,100,300,300,300);
ctx.stroke();

// courbe 2
ctx.beginPath();            
ctx.lineWidth = "3";
ctx.strokeStyle = "black"; 
ctx.moveTo(50,50);
ctx.quadraticCurveTo(300,100,300,300);
ctx.stroke();
jb_gfx a écrit :
Le gradients c'est une nouvelle unité qui vient de sortir ? Smiley lol C'est radians. Smiley murf

lolllllll !!!! L'heure à laquelle j'ai posté devrait justifier Smiley idee Smiley err Smiley rofl Et les gradients existent en effet.

a écrit :
Parce que si c'est ça, je vois pas le lien avec la translation

La translation doit être effectuée pour que tes formes dessinées ne sortent pas de ton canvas comme dans ce cas. Si tu testes ce code sans translation, tu ne verra rien car ton dessin déborde par la gauche, tu dois donc le décaler de telle sorte à ce qu'il soit toujours contenu dans ton canvas.
Le code que j'ai donné en dernier devrait marcher aussi.
D'accord merci.
Je comprends pourquoi faire la translation, mais j'ai encore une question : le centre de la rotation est toujours le centre du canvas ou on peut le choisir ?

Merci encore
??? Donc juste avec rotate, le pivot est le centre du canvas mais on peut choisir avec l'aide de translate ?
Désolée si j'ai l'air lente mais je pensais plus à des valeurs que l'on donnerait à rotate comme "fait moi une rotation de pi/4 (45°) autour du point machin" et non "déplace machin vers le centre fait moi la rotation de 45° puis remets machin où il était"...

Merci
Ccile13 a écrit :
??? Donc juste avec rotate, le pivot est le centre du canvas mais on peut choisir avec l'aide de translate ?


Non. Le point de pivot est toujours le point d'origine du canvas. Par défaut il est placé en haut à gauche du canvas et a pour coordonnées 0, 0.

Translate permet de déplacer ce point d'origine où tu veux dans le canvas (pas que ça, mais pour l'instant je veux pas t'embrouiller).

Les rotations se font toujours autour de ce point.

Ccile13 a écrit :

Désolée si j'ai l'air lente mais je pensais plus à des valeurs que l'on donnerait à rotate comme &quot;fait moi une rotation de pi/4 (45°) autour du point machin&quot;


C'est exactement ce que tu fais (en 2 étapes), c'est juste la façon de l'écrire qui varie.

Ccile13 a écrit :

et non &quot;déplace machin vers le centre fait moi la rotation de 45° puis remets machin où il était&quot;...


"Machin" c'est le point d'origine et pas autre chose.
Modifié par jb_gfx (01 Aug 2013 - 17:04)
Le point de rotation est toujours le point d'origine ? J'avoue que je ne vois pas comment c'est possible, puisque la zone de canvas est un unique cadran, si on fait par exemple une rotation de 180°, ça va forcément sortir de la zone non ? Ou alors j'ai rien compris à la rotation...
Faut vraiment lire tout ce que j'écris et pas juste des morceaux. La réponse à ta question est dans ma 3eme phrase. Smiley cligne
upload/50936-translate.png
Je ne vois pas comment faire autrement pour comprendre, vive les schémas!

Et j'ai fait pareil, mélanger gauche et droite... --"
Modifié par Ccile13 (01 Aug 2013 - 17:13)
Pages :
Sujet clos
Aller à