Faire tourner un arc de cercle

Version imprimable

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:

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>

18/03/2015, 01h06
Watilin

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.
18/03/2015, 07h53
bronon

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

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

Code:

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é...

@+

18/03/2015, 15h17
SpaceFrog

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

http://jsfiddle.net/o04cv49v/3/
18/03/2015, 16h35
bronon

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
18/03/2015, 16h53
SpaceFrog

un autre possibilité en SVG
http://jsfiddle.net/FrEeA/444/
18/03/2015, 16h56
SpaceFrog

sinon en css3

http://fiddle.jshell.net/4ggbg8g0/2

1 pièce(s) jointe(s)

sinon en as3 :

Code:

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
61
62
63
64
65
66
67
 
package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.display.StageScaleMode
 
	public class Main extends Sprite
	{
		private var arc_mobile:Sprite = new Sprite();
 
		public function Main():void
		{
			if (stage)
				init();
			else
				addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			stage.scaleMode = StageScaleMode.NO_SCALE; //pour éviter l'étirement automatique
			stage.align = StageAlign.TOP_LEFT;
 
			x = stage.stageWidth / 2;//origine au milieu de la scène pour la rotation
			y = stage.stageHeight / 2;
 
			with (arc_mobile.graphics)
			{
				beginFill(0xFFFF00);
				drawCircle(0, 0, 175);
				endFill();
				lineStyle(5, 0xFF0000);
			}
			 draw_arc(arc_mobile, 0, 0, 175, 0, Math.PI * 1.9);
 
			 addChild(arc_mobile);
		         arc_mobile.addEventListener(Event.ENTER_FRAME, tourner);
		}
 
 
 
		private function tourner(e:Event):void 
		{
			arc_mobile.rotation += 1; //gros point fort de flash : pas besoin d'obturer puisque l'on travaille par couches
		}
 
		//une fonction pour tracer un arc de cercle trouvée sur le net->il y a mieux avec curveTo() mais j'ai la flemme de regarder sur mon ordi portable...
		public function draw_arc(sprt:Sprite, center_x:Number, center_y:Number, radius:Number, angle_from:Number, angle_to:Number):void
		{
			var angle_diff:Number= angle_to - angle_from;
			var steps:Number = Math.round(angle_diff*180/Math.PI);
			var angle:Number = angle_from;
			var px:Number = center_x + radius * Math.cos(angle);
			var py:Number = center_y + radius * Math.sin(angle);
 
 
			sprt.graphics.moveTo(px, py);
			for (var i:int = 1; i <= steps; i++)
			{
				angle = angle_from + angle_diff / steps * i;
				sprt.graphics.lineTo(center_x + radius * Math.cos(angle), center_y + radius * Math.sin(angle));
			}
		}
	}
}

Pièce jointe 172267

pour compléter la panoplie :lol:

Merci pour vos réponses, j'ai fait les tests d'usage, résultats :
Sous W7
http://jsfiddle.net/FrEeA/444/ ==> ne fonctionne pas sous IE, Chrome & FF ok
http://fiddle.jshell.net/4ggbg8g0/2/ ==> fonctionne sous IE, Chrome & FF ok
http://jsfiddle.net/o04cv49v/3/ ==> fonctionne sous IE, Chrome & FF ok
Je ne souhaite pas utiliser Flash.

Sous Mac OS Safari (il a beaucoup d'utilisateurs de Mac pour ce développement)
http://jsfiddle.net/FrEeA/444/ ==> fonctionne OK
http://fiddle.jshell.net/4ggbg8g0/2/ ==> ne fonctionne pas
http://jsfiddle.net/o04cv49v/3/ ==> fonctionne OK

Seul pb subsistant, j'obtiens un canvas avec fond noir lorsque je cherche à créer ce canvas avec JS (Sous Safari & IE), j'ai l'impression de " louper une marche "
Si qqu'un peut m'expliquer pourquoi, d'avance merci. Mon code
Code:

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 var canv=document.createElement("canvas"); canv.setAttribute("id", "canvas"); canv.setAttribute("width", "200"); canv.setAttribute("height", "200"); document.body.appendChild(canv); var mainCanvas = document.querySelector('#canvas'); var mainContext = canvas.getContext('2d'); var radius = 80; 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(100,100);//pour que la rotation se fasse sur le centre du canvas mainContext.rotate(theta); mainContext.beginPath(); mainContext.arc(0,0, radius,0,pi * 1.30, true); // mainContext.fillStyle = "#FFF000"; mainContext.fill(); mainContext.strokeStyle="#FF0000"; mainContext.lineWidth=5; mainContext.stroke(); mainContext.lineCap = 'round'; 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/45; } window.requestAnimFrame = window.requestAnimationFrame || // La fonction standard window.webkitRequestAnimationFrame || // Chrome et Safari. window.mozRequestAnimationFrame || // Firefox. window.ORequestAnimationFrame || // Opera. window.msRequestAnimationFrame; // Internet Explorer.

24/03/2015, 16h22
Archimède

Ben, si tu enlèves le fillStyle, c'est peut-être un peu normal non ?

A+
24/03/2015, 19h09
bronon

Oups merci pour ta remarque
Un peu fatigué ces temps-ci !!!
Bonne soirée