3.1415926535

index.php

@@ -16,13 +16,9 @@ var_dump($res);
 ?>
 	
 	</code>
-	<canvas id="roulette"></canvas>
+	<svg id="roulette" width=800 height=800></svg>
 	<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("roulette"); 
-		var rendu = canvas.getContext('2d');
-		draw_roulette(rendu, canvas.width, canvas.height, datalist);
+		draw_roulette(2, 200, 200);
 	</script>
 </body>
 </html>

script.js

@@ -1,21 +1,14 @@
-function draw_roulette(ctx, w, h, datalist){
-	var radius = h / 2 - 5;
-	var center = new Array(w / 2, h / 2);
-	var init = 0;
-	var total = datalist.reduce((acc, value) => acc + value, init);
-	var lastend = 0;
-	var offset = Math.PI / 2;
-	for (i=0; i < datalist.length; i++){
-		var part = datalist[i];
 
-		ctx.beginPath();
-		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;	
-	}
+function draw_roulette(nb_person, x, y){
+	let chart = document.getElementById("roulette")
+	let angle = 0;
+	for (let i=0; i < 1; i++){
+		let coo_arr = new Array(250 - 50 * Math.cos(2 * Math.PI / nb_person), 200 - 50 * Math.sin(2 * Math.PI / nb_person));
+		let new_path = document.createElement("path");
+		new_path.setAttribute('fill', 'green');
+		new_path.setAttribute('d', "M 200 200 A 50 50 0 0 1 " + coo_arr[0] + " " + coo_arr[1] + " L 250 200 Z");
+		chart.appendChild(new_path);
+		console.log(new_path.getAttribute('d'));
 	}
+};
+