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>