Optimisation d'une animation dans canvas de html5
Bonjour, ayant plut�t l'habitude de r�aliser mes animations en actionscript, je cherchais � comparer les deux technologies d'un point de vue fluidit� et facilit� de conception.
Je me suis focalis� sur une animation simple de dessin avec translation et rotation. une roue en d�placement avec un rep�re qui tourne � l'int�rieur.
ci-joint mes deux tentatives de r�alisation en javascript/html5
une sans utilisation de translate() rotate() et l'autre avec...
ci-joint :
la seconde :
Code : S�lectionner tout - Visualiser dans une fen�tre � part
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
Ma question est : quelle est la meilleure m�thode � adopter... faut-il privil�gier la seconde m�thode (translate() rotate() du canvas) plut�t que la premi�re ?
Code : S�lectionner tout - Visualiser dans une fen�tre � part
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86<!DOCTYPE html> <html> <head> <title>roue en javascript</title> <meta charset="UTF-8"> </head> <body> <canvas id="canvas" width="1024" height="600"> <p> votre navigateur ne supporte pas Canvas. Mettez-le à jour</p> </canvas> <script type="text/javascript"> var canvas = document.querySelector('#canvas'); var context = canvas.getContext('2d'); var theta = 0; //angle de rotation en radian var R = 100; //rayon de la roue var retour = new Boolean(false); var penw = 3; function draw() { context.save(); //obturation (on efface la frame précédente=> peu efficace ici-ça plombe l'animation) context.clearRect(0, 0, canvas.width, canvas.height); context.translate(R * theta + R, R + 10);//déplacement de l'origine du canvas au centre de la roue context.rotate(theta);//rotation des axes du canvas context.strokeStyle = "black"; context.lineWidth = penw; //dessin du contour de la roue context.beginPath(); context.arc(0, 0, R, 0, 2 * Math.PI); context.stroke(); //dessin des quatre rayons for (var i = 0; i <= 3; i++) { context.beginPath(); context.moveTo(0, 0); context.lineTo(R * Math.cos(i * Math.PI / 2), R * Math.sin(i * Math.PI / 2)); context.stroke(); } context.restore();//retour de l'origine du contexte graphique sur (0,0) en supprimant la rotation //dessin du sol context.beginPath(); context.moveTo(0, 2 * R + 10 + penw); context.lineTo(canvas.width, 2 * R + 10 + penw); context.stroke(); //gestion de l'aller et retour if ((R * theta >= canvas.width - 2 * R) || (theta < 0)) { retour = !retour; } } function render() { draw(); window.requestAnimationFrame(render); if (retour) { theta += Math.PI / 180; } else { theta -= Math.PI / 180; } } render(); window.requestAnimFrame = window.requestAnimationFrame || // La fonction standard window.webkitRequestAnimationFrame || // Chrome et Safari. window.mozRequestAnimationFrame || // Firefox. window.ORequestAnimationFrame || // Opera. window.msRequestAnimationFrame; // Internet Explorer. </script> </body> </html>
Sachant qu'il faudrait que j'obture uniquement sur le dessin de la pr�c�dente frame dont le canvas a subi une rotation...
Des id�es d'optimisation puisque je d�bute presque dans ce langage et que je ne suis pas convaincu de l'int�r�t de migrer vers html5/javascript hormis les plantages de flashplayer et la d�saffection de flash par les distributeurs de pub.
R�pondre avec citation
Partager