用Canvas实现一个动态甜甜圈图表

const donutData = [{  per: 0.45,  text: '学习课',  startColor: '#FFEA33', // 黄色  stopColor: '#d8b616',  ellipseColor: '#FFD333',}, {  per: 0.25,  text: '复习课',  startColor: '#7bc31f', // 绿色  stopColor: '#96ec26',  ellipseColor: '#8FD43D',}, {  per: 0.3,  text: '拓展课',  startColor: '#f0870c', // 橙色  stopColor: '#ff9413',  ellipseColor: '#FF8221',}];

drawRing(startDeg, endDeg, strokeStyle, ellipseColor) {   const { ctx } = this;   ctx.save();   ctx.strokeStyle = strokeStyle;   ctx.beginPath();   ctx.lineWidth = R2 - R1;   ctx.arc(ctx.width / 2, ctx.height / 2, (R1 + R2) / 2, arcDeg(startDeg), arcDeg(endDeg));   ctx.stroke();   ctx.restore();   // this.drawEllipse(startDeg, ellipseColor);   // this.drawEllipse(endDeg, ellipseColor); },

draw() {  const { source } = this;
  source.forEach((s) => {    const { startPer, per, lgr, ellipseColor } = s;    const startDeg = startPer * ANGLE_360;    const endDeg = (startPer + per) * ANGLE_360;
    this.drawRing(startDeg, endDeg, lgr, ellipseColor);  });}

getLinearGradient(startColor, stopColor) {  const { ctx } = this;  const lgr = ctx.createLinearGradient(ctx.width / 2 - R2, ctx.height / 2, ctx.width / 2 + R2, ctx.height / 2);  lgr.addColorStop(0, startColor);  lgr.addColorStop(1, stopColor);  return lgr;}

drawEllipse(rotate, color) {  const { ctx } = this;
  rotate = deg(rotate);
  // 不使用画布旋转时的坐标计算方法  // const x = ctx.width / 2 + (R1 + R2) / 2 * Math.cos(rotate);  // const y = ctx.height / 2 + (R1 + R2) / 2 * Math.sin(rotate);
  // 画布旋转时，只需要让椭圆圆心定位在弧线的 0 度处  const x = 0;  const y = -(R1 + R2) / 2;
  ctx.save();  // 设置 canvas 中心到画布中心并旋转  ctx.translate(ctx.width / 2, ctx.height / 2);  ctx.rotate(rotate);
  ctx.moveTo(x, y);  ctx.beginPath();  ctx.fillStyle = color;  // 某些情况下 ellipse 的第五个参数 rotate 有兼容性问题无法旋转，但是椭圆可以画出来  // ctx.ellipse(x, y, EllipseR2, EllipseR1, rotate, 0, 2 * Math.PI);  ctx.ellipse(x, y, EllipseR2, EllipseR1, 0, 0, 2 * Math.PI);  ctx.fill();
  ctx.restore();}

drawLegendLine() {  const { ctx, x, y, endX } = this;  const { r } = this.dot;  const lineStart = endX > x ? x + r : x - r; // 图例可以在左侧也可以在右侧，所以线条存在延伸方向  const lineEnd = endX;
  ctx.save();  ctx.beginPath();  ctx.moveTo(lineStart, y);  ctx.lineTo(lineEnd, y);  ctx.strokeStyle = '#E6E6E6';  ctx.strokeWidth = 0.5;  ctx.stroke();  ctx.restore();}

/** * @param {number} iconX 图例 x 坐标 */drawLegendIcon(iconX) {  const { ctx, x, y } = this;  const { w, h, r, startColor, stopColor } = this.icon;  const iconY = y - h - Legend.MARGIN_BOTTOM; // 算出图例左上角 y 坐标
  ctx.save();
  const lgr = ctx.createLinearGradient(x, iconY, x, iconY + h);  lgr.addColorStop(0, startColor);  lgr.addColorStop(1, stopColor);
  ctx.fillStyle = lgr;  drawRoundedRect(ctx, iconX, iconY, w, h, r); // 这只是一个画矩形的方法，具体可以看看源码  ctx.fill();
  ctx.restore();}

/** * @param {number} textW 文字宽度 * @param {number} textH 文字高度 * @param {string} text  文字内容 */drawLegendText(textW, textH, text) {  const { ctx, x, y, endX } = this;  const { w, marginRight } = this.icon;
  const offsetY = 3;  // 用于调整实际渲染与预期的位置偏差
  ctx.save();  ctx.font = '12px Arial';  ctx.fillStyle = '#000000';  ctx.textBaseline = 'top';
  const textX = endX > x ? endX - textW : endX + w + marginRight;  const textY = y - textH - Legend.MARGIN_BOTTOM + offsetY;
  ctx.fillText(text, textX, textY);  ctx.restore();}

drawPartLegend(part) {  const { ctx } = this;
  const { startPer, per, startColor, stopColor, text } = part;  // 计算区域开始角度和结束角度的中间值: middleDeg = 360 * (startPer + (startPer + per)) / 2  // 如果第一部分占比超过 50%，让图例显示在右侧正中，即 90 度位置  const middleDeg = (startPer === 0 && per > 0.5) ? ANGLE_90 : ANGLE_360 * (startPer * 2 + per) / 2;
  // 下面是简单的三角函数计算图例在圆环上的起始点  const x = ctx.width / 2 + (R1 + R2) / 2 * Math.cos(arcDeg(middleDeg));  const y = ctx.height / 2 + (R1 + R2) / 2 * Math.sin(arcDeg(middleDeg));  // 限制文字宽度  const textMaxWidth = ctx.width / 2 - R2;
  // 小于 180 说明在右边  const endX = middleDeg <= ANGLE_180 ? ctx.width : 0;  const legend = new Legend({ ctx, x, y, textMaxWidth, endX, startColor, stopColor, text });  legend.draw();}

draw() {  const { source } = this;
  source.forEach((s) => {    // ...    this.drawPartLegend(s);  });}