用html5中的canvas绘制动态饼图

在HTML5中，我们可以利用Canvas API创建动态饼图。以下是基本步骤：

1. **HTML结构**:

<canvas id="myCanvas"></canvas>
<button onclick="drawChart()">绘制饼图</button>
<input type="number" id="quarterValues" placeholder="输入季度值 (逗号分隔)">

2. **JavaScript (绘制函数)**:

function drawChart() {
  // 获取用户输入的值并分割成数组
  const valuesStr = document.getElementById('quarterValues').value;
  const quarterValues = valuesStr.split(",").map(Number);

  // 初始化Canvas
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // 清除Canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 计算总和和角度
  let sum = quarterValues.reduce((a, b) => a + b, 0);
  const angles = quarterValues.map(value => (value / sum * Math.PI * 2));

  // 绘制饼图
  for (let i = 0; i < quarterValues.length; i++) {
    const sliceStartAngle = angles[i];
    const sliceEndAngle = angles[i + 1] || angles[0];
    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 4, sliceStartAngle, sliceEndAngle);
    ctx.fillStyle = "hsl(" + (i * 90) + ", 70%, 50%)"; // 色彩渐变
    ctx.fill();
    ctx.closePath();
    
    // 添加标签
    ctx.save();
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate(sliceStartAngle - Math.PI / 2);
    ctx.fillText(`${quarterValues[i]}%`, -20, 30); // 文本位置可根据需要调整
    ctx.restore();
  }
}

这个例子中，用户可以在输入框中输入季度值，然后点击“绘制饼图”按钮。Canvas会被清空并根据输入的值绘制相应的饼图。每个扇区的颜色由HSL颜色模型决定，且按角度顺序递增。