Browse Source

3.1415926535

master
quegzacov 2 years ago
parent
commit
aff8fa3ab3
  1. 8
      index.php
  2. 31
      script.js

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

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

Loading…
Cancel
Save