html5 canvas 原生 javascript 实现 饼状图实例 加介绍

图片

重点

 

• //一数据开始结束角度
• ctx.arc(100, 100, 50, Math.PI * 1.5, Math.PI * 1.5 - Math.PI * 2 * 60 / 100, true);
• //2数据开始结束角度
• ctx.arc(100, 100, 50, Math.PI * 1.5 - Math.PI * 2 * 60 / 100, Math.PI * 1.5 - Math.PI * 2 * 70 / 100, true);
• //3数据开始结束角度
• ctx.arc(100, 100, 50, Math.PI * 1.5 - Math.PI * 2 * 70 / 100, Math.PI * 1.5 - Math.PI * 2 * 100 / 100, true);
• 后值不变，前值累加
• x,y,半径，开始角度，结束角度，true 逆时针

上代码

 

 

 

 

持续根系