Question

我想在画布上使用以下布局绘制一些圆圈：画布中心的圆圈和画布四条边缘中点的四个圆圈。我在这里提出了我的代码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画布：绘制分隔的圆圈

2 个答案: