这里的的代码可以直接拿走看哟,仅供参考
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
canvas {
border: 1px solid gray;
margin: 50px auto;
display: block;
}
</style>
</head>
<body>
<canvas id="cvs" width="800" height="500"></canvas>
<script>
var ctx = document.getElementById('cvs').getContext('2d');
var data=[
{
name:'java',
color:'red',
num:0.3
},
{
name:'c#',
color:'yellow',
num:0.5
},
{
name:'js',
color:'blue',
num:0.1
},
{
name:'vue',
color:'pink',
num:0.1
}
];
var startAngle=0;//开始角度
var endAngle;//结束角
//绘制图形
for(var i in data){
var item=data[i];//数据对象
endAngle=item.num*2*Math.PI+startAngle;
ctx.beginPath();//开启新路径
ctx.fillStyle=item.color;//画笔颜色
// console.log(item.color);
ctx.moveTo(250,250);//指定圆心
console.log(startAngle,endAngle);
ctx.arc(250,250,200,startAngle,endAngle);
//修改开始角度
startAngle=endAngle;
ctx.fill();
}
</script>
</body>
</html>