javascript - HTML Canvas : drawing separated circles

Question

我想在 Canvas 上画一些圆圈，布局如下:一个圆圈位于 Canvas 的正中心，四个圆圈位于 Canvas 四个边缘的中点。我已将我的代码放在这里 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();