3.14

index.php

@@ -16,6 +16,14 @@ var_dump($res);
 ?>
 	
 	</code>
+	<canvas id="roulette"></canvas>
+	<script type="text/javascript">
+		var datalist= new Array(35, 25, 20, 12, 7, 1); 
+		var colist = new Array('blue', 'red', 'green', 'orange', 'gray', 'yellow');
+		var canvas = document.getElementById("canvas3"); 
+		var rendu = canvas.getContext('2d');
+		pie(rendu, canvas.width, canvas.height, datalist);
+	</script>
 </body>
 </html>
 

script.js

@@ -1,29 +1,21 @@
-function pie(ctx, w, h, datalist)
-{
+function draw_roulette(ctx, w, h, datalist){
 	var radius = h / 2 - 5;
-  var centerx = w / 2;
-  var centery = h / 2;
+	var center = new Array(w / 2, h / 2);
 	var total = 0;
-  for(x=0; x < datalist.length; x++) { total += datalist[x]; }; 
+	var sum = datalist.reduce((acc, value) => acc + value, total);
 	var lastend = 0;
 	var offset = Math.PI / 2;
-  for(x=0; x < datalist.length; x++)
-  {
-    var thispart = datalist[x]; 
+	for (i=0; i < datalist.length; i++){
+		var part = datalist[i];
+
 		ctx.beginPath();
-    ctx.fillStyle = colist[x];
-    ctx.moveTo(centerx,centery);
-    var arcsector = Math.PI * (2 * thispart / total);
-    ctx.arc(centerx, centery, radius, lastend - offset, lastend + arcsector - offset, false);
-    ctx.lineTo(centerx, centery);
+		ctx.fillStyle = colist[i];
+		ctx.moveTo(center[0], center[1]);
+		var arcsector = Math.PI * (2 * part / total);
+		ctx.arc(center[0], center[1], radius, lastend - offset, lastend + arcsector - offset, false);
+		ctx.lineTo(center[0], center[1]);
 		ctx.fill();
 		ctx.closePath();		
 		lastend += arcsector;	
 	}
 } 
-
-var datalist= new Array(35, 25, 20, 12, 7, 1); 
-var colist = new Array('blue', 'red', 'green', 'orange', 'gray', 'yellow');
-var canvas = document.getElementById("canvas3"); 
-var ctx = canvas.getContext('2d');
-pie(ctx, canvas.width, canvas.height, datalist);