Browse Source

3.14

master
quegzacov 2 years ago
parent
commit
17e8e00109
  1. 8
      index.php
  2. 48
      script.js

8
index.php

@ -16,6 +16,14 @@ var_dump($res);
?> ?>
</code> </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> </body>
</html> </html>

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