Я пытаюсь воспроизвести такой график:
Я пытаюсь понять, как заполнить определенный процент срезов в середине круговой диаграммы, но также и как заполнить диаграмму пончиков таким же образом.
Я пытался использовать 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>