Discussion :

[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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

[Invit�]

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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