如何使用css和javascript创建一个由弧段组成的圆？

Question

我已经在互联网上看了很长一段时间，但我找不到答案。我对网络开发很新，我正在尝试学习css / html和javascript。

我想创建一个由12个段组成的圆，我也希望控制每个段（即能够随意更改颜色，也可能是某种动画，例如段1变红然后段2随后转为蓝色。）

我试图达到类似的效果：

每个片段最初都是白色的，只有在指定时才会改变颜色。

有人可以指出我在正确的方向上找到最佳方法吗？

Answer 1

您可以使用ChartJS的圆环图表。只需确保将甜甜圈分成12组相同的数据（在我的例子中，我将对所有12个数据点使用1）。这将使它们大小相同。然后，您可以单独控制它们的颜色，然后更新图表。

https://jsfiddle.net/8t8tmc0q/

必要的HTML：

<canvas id="myChart" width="400" height="400"></canvas>

和JavaScript：

Chart.defaults.global.legend.display = false;
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ['1','2','3','4','5','6','7','8','9','10','11','12'],
    datasets: [{
      data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
      backgroundColor: [
        'white',
        'white',
        'white',
        'white',
        'white',
        'white',
        'white',
        'white',
        'white',
        'white',
        'white',
        'white'
      ],
      borderColor: 'black',
      borderWidth: 1
    }]
  }
});

然后，要更新颜色，只需指定要更新的部分，然后使用myChart.update()功能绘制更改：

myChart.data.datasets[0].backgroundColor[5] = 'red'
myChart.update();