HTML 画布：绘制分隔的圆圈

Question

我想在 canvas 上画一些圆圈，布局如下：一个圆圈在 canvas 的中心，四个圆圈在 canvas 四个边的中点=22=]。我已经把我的代码放在这里 jsfiddle。圆圈已渲染，但它们之间也有多个填充路径，导致合并混乱。

我正在使用

绘制所有圆圈

ctx.arc(points[i].x, points[i].y, radius, 0, 2 * Math.PI, true);

如何删除它们？

编辑：工作 jsfiddle

Answer 1

在每个圆弧后加上closePath，使圆不相连：

ctx.arc(points[i].x, points[i].y, radius, 0, 2 * Math.PI, true);

ctx.closePath();

Answer 2

您可能希望在每条弧线之后进行填充。

像这样的东西应该可以工作

ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, true);
ctx.fill();
for(var i = 0; i < points.length; i++){
    var _ = points[i];

    ctx.beginPath();
    ctx.arc(_.x, _.y, 25, 0, 2 * Math.PI, true);
    ctx.fill();
}

HTML 画布：绘制分隔的圆圈

HTML canvas: drawing separated circles

html

javascript

canvas