问题

Question

我尝试使用HTML5 Canvas制作动画，其中我绘制3个片段的位置，每个片段用圆圈连接。

每个圆的位置由（x1，y1），（x2，y2）和（x3，y3）确定。

这是我的代码段：

activity_id

以下是这些细分市场的起始位置：

（x0，y0）是动画期间永不改变的顶点坐标。

现在，经过一些迭代后，我得到了下图：

如您所见，我的代码填充了3个点（x1，y1），（x2，y2）和（x3，y3）之间的三角形。

我不想填写此内容，我只想绘制3段，每次迭代只填充3个圆圈。

上面的代码段出了什么问题？

感谢您的帮助

Answer 1

问题

arc（）只是一条路径，不经意地是圆形的，但有两个开口端。这会导致它附加到上一个路径点。发出fill（）时，主路径关闭，导致第一个弧端连接到第一个弧起点。

解决方案

您可以通过为弧创建子路径来解决此问题。为每个从角度0开始的弧插入一个moveTo（）（同时删除CCW的最后一个布尔值，以便按顺时针方向绘制）。当我们处理子路径时调用closePath（）将导致子路径结束，这在我们的情况下是好的，因为我们可以用moveTo（）关闭起始点集。恰好与弧的起点对应，然后连接到弧的终点。

实施例

 context.beginPath();

 context.moveTo(x1 + radius, y1);  // create a new sub-path
 context.arc(x1, y1, radius, 0, 2*Math.PI);
 context.closePath();              // closes the current sub-path

 context.moveTo(x2 + radius, y2);  // create a new sub-path
 context.arc(x2, y2, radius, 0, 2*Math.PI);
 context.closePath();              // closes the current sub-path

 context.moveTo(x3 + radius, y3);  // create a new sub-path
 context.arc(x3, y3, radius, 0, 2*Math.PI);
 context.closePath();              // closes the current sub-path

 // fill all sub-paths
 context.fillStyle = 'blue';
 context.fill();  // would normally close the main path, but now we only have sub-paths

使用lineTo和arc - fill问题绘制线段和圆

1 个答案:

问题

解决方案

实施例