HTML5畫布 - 繪制線段和圓圈 - 一個圓圈的不同顏色

Question

我嘗試繪制由段連接的圓圈。 我希望這些線段有黑色和圓圈藍色，除了第一個圓圈（位於畫布的中心，必須是黑色）。

這是一個顯示當前結果的捕獲：

如您所見，除了第一個保持藍色的圓圈外，結果很好。

這是代碼：

// Get context
context = canvas.getContext('2d');

context.fillStyle = 'white';
context.fillRect(0, 0, 650, 650);

// Draw black segments
context.beginPath();
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x3, y3);
context.strokeStyle = 'black';
context.stroke();

// Draw circles (blue except for the first which is black)
context.beginPath();
// Create sub-path
context.moveTo(x0, y0);
context.arc(x0, y0, radius, 0, 2 * Math.PI);
context.fillStyle = 'black';
context.fill();
context.closePath();
// Close sub-path

// Create sub-path
context.moveTo(x1, y1);
context.arc(x1, y1, radius, 0, 2 * Math.PI);
context.closePath();
// Close sub-path

// Create sub-path
context.moveTo(x2, y2);
context.arc(x2, y2, radius, 0, 2 * Math.PI);
context.closePath();
// Close sub-path

// Create sub-path
context.moveTo(x3, y3);
context.arc(x3, y3, radius, 0, 2 * Math.PI);
context.closePath();
// Close sub-path

// Fill all sub-paths
context.stroke();
context.fillStyle = 'blue';
context.fill();

似乎我不能通過以下方式填充一個圓圈：

    context.beginPath();
    // Create sub-path
    context.moveTo(x0, y0);
    context.arc(x0, y0, radius, 0, 2 * Math.PI);
    context.fillStyle = 'black';
    context.fill();
    context.closePath();
    // Close sub-path

如果有人能夠看到繞過這個問題的錯誤。

提前致謝

Answer 1

您需要開始一條新路徑來填充您的藍色圓圈

context.beginPath();
//draw black circle
context.fill();

context.beginPath();
//draw blue arcs
context.fillStyle='blue
context.fill();

在這里小提琴