<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="shanxing" width="500" height="500" style="border:5px dashed gray;"></canvas>
<script>
var cnv=document.getElementById("shanxing");
var cxt=cnv.getContext("2d");
var data=[200,300,400,500];
var sum=0;
data.forEach(function(item,i){
sum+=item;
})
var arangle=[];
data.forEach(function(item,i){
var angle=(item/sum)*2*Math.PI;
arangle.push(angle);
})
var r=80;
var x=cnv.width/2;
var y=cnv.height/2;
var startangle=0;
arangle.forEach(function(item,i){
var endangle=startangle+item;
createSector(cxt,x,y,r,startangle,endangle);
cxt.fillStyle=getColor();
cxt.fill();
startangle=endangle;
})
function createSector(cxt,x,y,r,angle1,angle2){
cxt.beginPath();
cxt.moveTo(x,y);
cxt.arc(x,y,r,angle1,angle2);
cxt.closePath();
}
function getColor(){
var r=Math.floor(Math.random()*256);
var g=Math.floor(Math.random()*256);
var b=Math.floor(Math.random()*256);
return "rgb("+r+","+g+","+b+")";
}
</script>
</body>
</html>
效果如图：
1009
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
