canvas Five 饼图
2017-04-12 本文已影响26人
尤樊容
前面几节的链接：http://www.jianshu.com/u/ab8f021be9ee
需要大家的支持，接着canvas画饼图，有图有代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0;padding:0;}
html,body{
height: 100%;
overflow: hidden;
}
body{
background: #000;
}
#c1{
background: #fff;
}
</style>
<script>
function d2a(n){
return n*Math.PI/180;
}
function rnd(m,n){
return parseInt(m+Math.random()*(n-m));
}
document.addEventListener('DOMContentLoaded',function(){
var oC = document.getElementById('c1');
var gd = oC.getContext('2d');
var cx = 200;
var cy = 200;
var r = 100;
var arr = [98,80,65,34,12];
var sum = 0;
//求和
for(var i = 0;i<arr.length;i++){
sum+=arr[i];
}
//算比例
var aDeg = [];
for(var i = 0;i<arr.length;i++) {
aDeg[i] = arr[i]/sum*360;
}
//画每一部分
var d = 0;
for(var i = 0;i<aDeg.length;i++){
drawPie(d,d+aDeg[i]);//aDeg 0
d+=aDeg[i];
}
function drawPie(start,end){
gd.beginPath();
gd.fillStyle ='rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';
gd.moveTo(cx,cy);
gd.arc(cx,cy,r,d2a(start),d2a(end),false);
gd.closePath();
gd.fill();
}
},false);
</script>
</head>
<body>
<canvas id="c1" width="800" height="600"></canvas>
</body>
</html>
效果图：
Paste_Image.png
