扇形的弧度没有到圆心的连线啊,这不是我们理想中的扇形,(如下图)
这样老实巴交的扇形如何实现呢,很简单,在绘制扇形前进行路径引入
context.beginPath();
contetx.moveTo...,但是类似于饼状图怎么实现呢
简单的实现了,我们可以进行复制核心代码进行,不同扇形图进行拼接一个圆,就变成一个饼状图....cv.arc(300,300,150,0*Math.PI/180,60*Math.PI/180);
cv.fillStyle='yellow';//填充样式
cv.fill();//填充(闭合)
完整饼状图实现...Math.PI/180,360*Math.PI/180);
cv.fillStyle='#26ffff';
cv.fill();
当然还有稍微改进可以将饼状图变为空心的饼状图...,饼状图去掉圆心
图例:
代码实现:
<!