如何在饼图中填充一定份额的切片？

Question

我正在尝试重现这样的图表：

我想弄清楚的是如何在饼图中间填充一定比例的切片，以及如何以同样的方式填充圆环图。

我曾尝试使用 fillRect() 但这并没有按照我想要的方式填充切片。 如果您对如何获得类似于我上面介绍的图表有任何想法，请告诉我。

 var canvas = document.getElementById('Arc'); var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; function draw() { context.save(); context.beginPath(); context.arc(centerX, centerY, 50, 50, (Math.PI) / 2, true); context.clip(); context.fillStyle = '#090A09'; context.fillRect(centerX, centerY, -25, 50); context.lineWidth = 5; context.strokeStyle = '#000000'; context.stroke(); } draw();

 <canvas id="Arc"></canvas>

Answer 1

fillRect 只是一个矩形，如果你需要一个饼图，我们可以用弧线来做。

从圆心开始的馅饼我们只是移动到中心然后绘制弧并填充它们，对于甜甜圈馅饼我们必须做两个相反方向和不同半径的弧并调用fill()

请参阅下面的示例：

 var canvas = document.getElementById('Arc'); var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; context.beginPath(); context.strokeStyle = 'red'; context.arc(centerX, centerY, 50, 0, Math.PI * 2); context.stroke(); context.beginPath(); context.fillStyle = 'blue'; context.moveTo(centerX, centerY) context.arc(centerX, centerY, 50, 0, Math.PI * 0.5); context.fill() context.beginPath(); context.fillStyle = 'black'; context.moveTo(centerX, centerY) context.arc(centerX, centerY, 45, Math.PI * 1.6, Math.PI * 1.8); context.fill() context.beginPath(); context.fillStyle = 'lime'; context.arc(centerX, centerY, 51, Math.PI, Math.PI * 1.2); context.arc(centerX, centerY, 95, Math.PI * 1.2, Math.PI, true); context.fill() context.beginPath(); context.fillStyle = 'green'; context.arc(centerX, centerY, 60, Math.PI * 1.8, Math.PI * 2.1); context.arc(centerX, centerY, 95, Math.PI * 2.1, Math.PI * 1.8, true); context.fill()

 <canvas id="Arc"></canvas>