<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{width: 600px;height: 600px;margin: 0 auto;}
canvas{border: 1px solid red;}
</style>
</head>
<body>
<div>
<canvas width="600px" height="600px" id="pie"></canvas>
</div>
<script>
var timer = null;
clearInterval(timer);
timer = setInterval(function () {
var color = ["#c12e34", "#0098d9", "#e6b600", "#2b821d", "#005eaa", "#339ca8", "#cda819", "#32a487"];
var arr = [Math.random()*10,Math.random()*10,Math.random()*10,Math.random()*10,Math.random()*10,Math.random()*10,];
var canvas = document.getElementById("pie");
var ctx = canvas.getContext("2d");
var sum = getSum(arr);
function getSum(val){ //求和
return eval(val.join("+"));
}
var startCycle = 0;
ctx.clearRect(0,0,canvas.width,canvas.height); //在给定的矩形内清除给定的像素（x轴,y轴，需要清除的宽度，需要清除的高度）
for(var i=0;i<arr.length;i++){
var cycle = arr[i]/sum*2*Math.PI;
var endCycle = cycle+startCycle;
ctx.beginPath(); //起始一条路径，或重置当前路径
ctx.strokeStyle=color[i]; //设置或返回用于笔触的颜色，渐变或模式
ctx.lineWidth=arr[i]/sum*350; //设置或返回当前的线条宽度
ctx.arc(canvas.width/2,canvas.height/2,ctx.lineWidth/2+80,startCycle,endCycle,false); //创建弧、曲线（经常用于创建圆形或半圆）[x轴,y轴，半径，起始角度，结束角度,是否逆时针]
ctx.stroke(); //绘制已经定义的路径
startCycle = endCycle;
}
},1000);
</script>
</body>
</html>
网友评论