小程序实现圆饼图

效果图

在这里插入图片描述

预备知识

CanvasContext.createCircularGradient(number x, number y, number r)
创建一个圆形的渐变颜色。起点在圆心，终点在圆环。返回的CanvasGradient对象需要使用 CanvasGradient.addColorStop() 来指定渐变点，至少要两个。（详细介绍
Canvas的基本绘制API

实现代码

注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:
弧度=(Math.PI/180)*角度。

function drawPie(canvas, anglesArray, circular, percent) {//画出饼状图var ctx = canvas;//颜色列表const color = [{ start:'rgb(76, 197, 255)' , end:'rgb(81, 122, 255)'  },{ start: 'rgb(38, 236, 161)', end: 'rgb(12, 182, 224)' },{ start: 'rgb(255, 115, 137)', end: 'rgb(230, 75, 161)' }]for (let i = 0; i < anglesArray.length; i++) {let startAngle;let endAngle;if (i == 0) {startAngle = transformAngle(0);endAngle = transformAngle(anglesArray[i] - 1);}else {let start = 0;for (let j = 0; j < i; j++) {start += anglesArray[j];}startAngle = transformAngle(start);endAngle = transformAngle(start + anglesArray[i] - 1);}ctx.beginPath();ctx.arc(circular.x, circular.y, circular.radius, startAngle, endAngle);ctx.lineTo(circular.x, circular.y);ctx.closePath();//填充渐变色let gra = ctx.createCircularGradient(circular.x, circular.y, circular.radius);gra.addColorStop(0, color[i].start)gra.addColorStop(1, color[i].end);ctx.setFillStyle(gra)ctx.fill();}//绘制中间的空白圆ctx.beginPath();ctx.arc(circular.x, circular.y, circular.radius * percent, 0, 360);ctx.fillStyle = "white";ctx.fill();ctx.draw();
}
function transformAngle(angle) {//计算弧度return (Math.PI / 180) * angle
}