javascript - p5.j​​s canvas 带椭圆的绘图路径

Question

我正在使用 socket.io、node.js 和 p5.js 开发实时 Canvas 绘图 webapp。拖动鼠标时无法创建平滑线。如果鼠标拖得太快，每个椭圆之间就会出现空白区域。这里的最终目标是创建一条平滑的路径。以下是我到目前为止尝试过的事情:

尝试 1:

noStroke();
fill(lineColor[0],lineColor[1],lineColor[2]);
ellipse(mouseX, mouseY, lineThickness, lineThickness);

尝试 2:

strokeWeight(lineThickness);
line(mouseX,mouseY);
stroke(lineColor[0],lineColor[1],lineColor[2]);

这是问题的图片: canvas drawing incomplete path image

欢迎任何反馈；谢谢!

Answer 1

Kevin 的回答很好，因为画线比画许多椭圆更有效率。您还应该研究:

• beginShape()/结束形状()
• bezierVertex()
• curveVertex()
• curvePoint()

上面的内容应该可以帮助您绘制一条平滑的路径，并且设置较粗的笔触会看起来像许多填充的椭圆连接在一起形成了路径。

如果出于某种原因您确实想要绘制许多椭圆，您可以在鼠标移动得更快时插入位置并创建间隙来填充这些间隙。 有关更多信息和 p5.js 示例，请查看此答案: Processing: Draw vector instead of pixels