[HTML5] canvas méthode rotate ?

[Luke spywoker]

Bonjours aux javascripteurs
Je ne comprend pas la méthode rotate() utilser dans un canvas:
Je vous présente mon test code qui ne marche pas et qui est censer afficher un cercle constituer de cercles:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<canvas id='zone' width='180', height='180'>
</canvas>
<script type='text/javascript'>
var contexte=document.getElementById('zone').getContext('2d')
contexte.translate(45,45) //déplacement du centre
contexte.arc(0,0,5,0,Math.PI*2, true) // traçage du premier cercle que rotate est censer copier
contexte.translate(90,90) //centrer au milieux du canvas
for (i=1; i < 31; i++) {
  //boucle pour faire mon cercle de cercles
  contexte.rotate((i*12)*(Math.PI/180))
  contexte.arc(0,0,5,0,Math.PI*2, true) // le centre est censer avoir été changer par la rotation
}
contexte.fill()
</script>

Je vous pris de vous en donner a coeur joie afin de m'expliquer pourquoi ca ne marche pas.
PS: j'ai passer 2 jours sur la méthode rotate sans avoir de résultat suffisant.

[Watilin]

Salut,

il faut savoir que le contexte conserve toutes les modifications que tu lui apportes au cours du temps. Cela inclut les rotations, les échelles et les translations.

Le contexte est une sorte de repère, si tu as fait un peu de maths. Il y a un point origine O, un vecteur x et un vecteur y. Au départ, le point O est en haut à gauche de ton canevas, x pointe vers la droite, y poite vers le bas ; ces deux vecteurs ont une longueur de 1.

Si je fais une translation, je déplace le point O.

Si je fais une rotation, je change les directions de x et y.

Et si je fais une échelle, je change les longueurs des vecteurs. C'est important car toutes les nouvelles distances seront calculées en fonction de ces vecteurs. Par exemple, si je fais contexte.scale(0.5, 1);, j'ai divisé par 2 la longueur de x. Après ça, si je veux tracer une ligne comme ceci :

Code :

1
2
3
4
contexte.beginPath();
contexte.moveTo(0, 0);
contexte.lineTo(10, 0);
contexte.stroke();

Je constate que la longueur réelle de ma ligne est de 5 pixels, et non 10 !
Pour les rotations, c'est plus difficile de prévoir les longeurs réelles, car il faut utiliser les sinus et les cosinus. Mais tu n'en auras pas besoin ici...

Pour nous aider à gérer les longues suites de transformations, l'objet contexte nous fournit deux méthodes très sympathiques :save et restore. À chaque fois que tu appelles save, toutes les variables du contexte, ce qui inclut O, x et y, sont sauvegardées dans une pile cachée. Quand tu appelles restore, le dernier état sauvegardé est retiré de la pile et restauré. C'est très pratique quand plusieurs fonctions se partagent le même objet contexte :

Code :

1
2
3
4
5
6
7
function bidule( ctx ) {
   ctx.save();
 
   // ... dessiner des trucs
 
   ctx.restore();
}

Avec tous ces outils, je pense que tu es capable d'arriver à tes fins. Je te laisse chercher sinon c'est pas drôle
Tu as deux pistes : soit tu pars du centre, tu vas au bord, tu dessines un point, tu reviens et tu tournes ; soit tu commences par un point du bord et tu fais une mini-rotation et une mini-translation pour aller dessiner le point d'à-côté, jusqu'à avoir fait tout le tour.
À toi de voir !

[Luke spywoker]

Merci pour la réponse éclairée que tu m'a fourni, j'avais lu quelques tutoriels et tu a consolider mon savoir sur les différentes méthodes de l'objet javascript canvas: j'y vois un peu plus clairs.
Mais je ne comprend pas pourquoi dans mon test code quand j'effectue une translation au centre du canvas avant la boucle censer dessiner les cercles pourquoi celle-ci ne déssine pas tous les cercles car si tu a copier et exécuter le code tu aura remarquer que celui çi trace juste un seule cercle de plus en face, par rapport au centre du canvas, du cercle initiale et une traine de pixels vers celui-çi... Pourtant le point O est au bon endroit pour effectuer une rotation de x,y et les angles sont correctement calculer non ?
PS: Avant de poster j'ai essayer pendant plusieurs heures d'effectuer ce dessin sans succès et j'ai capituler par mon post.
Merci pour ta réponse éclairée.

[Watilin]

En fait, il dessine bien tous les cercles, mais il les dessine tous au même endroit.
C'est logique : après la translation (90, 90), toutes les rotations se font autour du point O qui est alors en (135, 135) car 45 + 90 = 135. Si tu dessinais des carrés, tu verrais qu'ils ont chacun une orientation différente, mais comme c'est des cercles on ne voit rien

[mekal]

bonjour tu n'utilise pas les methodes save et restore

dans cette partie tu fait une translation de 45 45 puis tu en refait une autre de 90 90 et tu pense etre au centre du canvas alors que ce n'est pas le cas tu te trouve a 45 + 90 =135

Code :

1
2
3
4
var contexte=document.getElementById('zone').getContext('2d')
contexte.translate(45,45) //déplacement du centre
contexte.arc(0,0,5,0,Math.PI*2, true) // traçage du premier cercle que rotate est censer copier
contexte.translate(90,90) //centrer au milieux du canvas

il faut faire un save avant la premiere translation puis faire un restores afin de repositionner l'origine precedent qui dans ton cas est la partie supperieur gauche du canvas ou alors il faudrait un translate de 90-45=45

Code :

1
2
3
4
5
6
var contexte=document.getElementById('zone').getContext('2d')
contexte.save()
contexte.translate(45,45) //déplacement du centre
contexte.arc(0,0,5,0,Math.PI*2, true) // traçage du premier cercle que rotate est censer copier
contexte.restore()
contexte.translate(90,90) //centrer au milieux du canvas

et pour le cercle c'est la meme erreur avec en plus le fait qu'il manque un rayon de cercle donc tu fait une rotation a zero