HTML 画布:绘制分隔的圆圈

HTML canvas: drawing separated circles

本文关键字：分隔 绘制 画布 HTML      更新时间：2023-09-26

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

我正在使用绘制所有圆圈 

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

如何删除它们？

编辑：工作jsfiddle

在每个圆弧之后放closePath，这样圆圈就不会连接：

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

想在每个弧线之后填充。

这样的东西应该有效

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();
}
相关文章：