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

**SpaceFrog** · 18/03/2015, 16h53

un autre possibilité en SVG
http://jsfiddle.net/FrEeA/444/

**SpaceFrog** · 18/03/2015, 16h56

sinon en css3

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

**Archimède** · 19/03/2015, 20h42

sinon en as3 :

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
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));
			}
		}
	}
}

arcmobile.swf

pour compléter la panoplie

**bronon** · 24/03/2015, 08h57

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 :

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

**Archimède** · 24/03/2015, 16h22

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

A+

**bronon** · 24/03/2015, 19h09

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

Faire tourner un arc de cercle

JavaScript

Discussions similaires

Partager

Partager