Faire tourner un arc de cercle

**bronon** · 17/03/2015, 22h42

Bonsoir à tous,
Je souhaite animer un arc de cercle de manière infinie sur son centre.
Je patauge depuis des heures sans rien sortir ! L'arc de cercle se dessine bien mais ne tourne pas ! (de toutes les manières je ne sais pas comment faire).
Si qqqu'un peut me donner une piste, d'avance merci.
Mon code :

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div id="container">
    <canvas id="myCanvas" height="450" width="450"></canvas>
</div>
<script>
	var mainCanvas = document.querySelector("#myCanvas");
	var mainContext = mainCanvas.getContext("2d");
	var canvasWidth = mainCanvas.width;
	var canvasHeight = mainCanvas.height;
	var radius = 175;
	function drawCircle() {
		for(var i = 1; i < 1000; i++){
 
			mainContext.clearRect(0, 0, canvasWidth, canvasHeight);
 
			// color in the background
			mainContext.fillStyle = "#EEEEEE";
			mainContext.fillRect(0, 0, canvasWidth, canvasHeight);
 
			// draw the circle
			mainContext.beginPath();
 
			mainContext.arc(225, 225, radius, 0, Math.PI * 1.9, false);
	//		mainContext.closePath();
//			console.log('i = '+i+" • : "+Math.PI * 1.9 * (i/1000))
			// color  circle
			mainContext.fillStyle = "#FFF";
			mainContext.fill();
			mainContext.strokeStyle="#FF0000";
			mainContext.lineWidth=5;
			mainContext.stroke();
		}
	}
	drawCircle();
</script>

**Watilin** · 18/03/2015, 01h06

Bonsoir,

un <canvas> c'est un peu comme les projecteurs de cinéma analogiques, ceux qui fonctionnent avec une pellicule. Le projecteur a un mécanisme appelé obturateur qui fait le noir entre deux images de la pellicule, pour permettre à la rétine du spectateur de capter une image nette.

Avec le canevas, le rôle de l'obturateur est joué par ton script. Plus précisément, ton script doit faire des pauses, sinon le canevas attend la fin du script avant de se mettre à jour. La fonction requestAnimationFrame a été créée pour ça. Si tu connais setTimeout, tu n'auras pas de mal à t'en servir, elle s'utilise de la même façon.

**bronon** · 18/03/2015, 07h53

Merci pour ta réponse,;
j'ignorais l'existence de cette function.
Pb suivant, cette function n'est compatible qu'avec IE 10 comment faire avec les versions précédentes ?
Bonne journée

**Archimède** · 18/03/2015, 15h01

voilà la méthode en réutilisant ton code avec requestAnimFrame :

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
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
 
<!DOCTYPE html>
<html>
    <head>
        <title>Arc tournant</title>
        <meta charset="UTF-8">   
    </head>
    <body>
        <canvas id="canvas" width="450" height="450">
            <p> votre navigateur ne supporte pas Canvas. Mettez-le à jour</p>
        </canvas>
        <script type="text/javascript">
            var mainCanvas = document.querySelector('#canvas');
            var mainContext = canvas.getContext('2d');
            var radius = 175;
            var theta = 0;  //angle de rotation en radian
            var canvasWidth = mainCanvas.width;
	    var canvasHeight = mainCanvas.height;
            var pi=Math.PI;
 
         function drawCircle() {
 
			mainContext.clearRect(0, 0, canvasWidth, canvasHeight);
			// color in the background
 
			mainContext.fillStyle = "#EEEEEE";
			mainContext.fillRect(0, 0, canvasWidth, canvasHeight);
                        mainContext.save();//avant modif de translation et de rotation
			// draw the circle
			mainContext.translate(225,225);//pour que la rotation se fasse sur le centre du canvas 
                        mainContext.rotate(theta);
			mainContext.beginPath();
 
			mainContext.arc(0,0, radius,0,pi * 1.9, false);
			mainContext.fillStyle = "#FFF000";
			mainContext.fill();
			mainContext.strokeStyle="#FF0000";
			mainContext.lineWidth=5;
			mainContext.stroke();
                        mainContext.restore();  //on restitue l'état du dernier contexte sans translation ni rotation pour redessiner le fond     
	}
 
            function render()
            {
                drawCircle();
                window.requestAnimationFrame(render);
                theta+=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>

J'ai fait ça vite fait...optimise, je n'ai fait que reprendre ta fonction drawCircle()

Sinon, si tu ne veux pas utiliser requestAnimFrame pour les versions de navigateur non compatibles, utilise setInterval(drawCircle,10);
mais tu vas perdre largement en fluidité...

@+

**SpaceFrog** · 18/03/2015, 15h17

la version d'Archimède en fiddle...

http://jsfiddle.net/o04cv49v/3/

**bronon** · 18/03/2015, 16h35

Merci pour vos réponses que je vais regarder attentivement dans la soirée.
Concernant j'avais essayé une solution avec setInterval ==> aucune fluidité donc sans intérêt !
Bonne fin de journée

Faire tourner un arc de cercle

JavaScript

Vue hybride

Discussions similaires

Partager

Partager