HTML5 Canvas 繪製實心圓點：fill() 與 stroke() 的正確用法

在 Canvas 繪製數據點時，若只調用 stroke() 會得到空心圓，需改用 fill() 或兩者結合才能得到實心效果。常見錯誤是將 fill() 放在 closePath() 之後或路徑重置後。

錯誤代碼

for (var i = 0; i < a.length; i++) {
    g.arc((i + 1) * 100, a[i], 3, 0, Math.PI * 2, true);
    g.lineTo((i + 1) * 100, a[i]); // 多餘的 lineTo 會干擾路徑
}
g.stroke(); // 僅描邊，得到空心圓
g.closePath();

正確寫法：每個圓點獨立路徑並填充

for (var i = 0; i < a.length; i++) {
    g.beginPath();                 // 關鍵：每個圓點獨立開始新路徑
    g.arc((i + 1) * 100, a[i], 3, 0, Math.PI * 2, true);
    g.fill();                      // 填充實心圓
    g.stroke();                    // 可選：同時描邊獲得外框
    g.closePath();
}

關鍵點總結

1. 每個圓點調用 beginPath()，否則所有圓弧會連成單一路徑，fill() 會產生不可預期的填充區域。
2. 移除多餘的 lineTo()，arc() 已閉合圓形路徑。
3. 先 fill() 後 stroke()，避免描邊被填充覆蓋一半（因描邊向內外各延伸半線寬）。
4. 若需自定義填充顏色，在 fill() 前設置 g.fillStyle = '#color'。

掌握路徑管理機制，即可精確控制 Canvas 繪圖輸出，避免「明明調用了 fill() 卻不生效」的困擾。