p5.j​​s用椭圆canvas绘制path

我正在使用socket.io，node.js和p5.js实时绘制Web应用程序。 拖动鼠标时，我无法创build平滑的线条。 如果鼠标拖得太快，则每个椭圆之间都有一段空的空间。 这里的最终目标是创造一条平坦的道路。 以下是我迄今为止所尝试的内容：

尝试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绘制不完整的path图像

欢迎任何反馈意见; 谢谢！

Answer 1

您可以使用pmouseX和pmouseYvariables来保存游标的前一个位置。 用它来画一条从前一个位置到当前位置的线，以填充鼠标事件之间的空白区域。

从参考 ：

 // Move the mouse across the canvas to leave a trail function setup() { //slow down the frameRate to make it more visible frameRate(10); } function draw() { background(244, 248, 252); line(mouseX, mouseY, pmouseX, pmouseY); print(pmouseX + " -> " + mouseX); } 

 <script src="https://github.com/processing/p5.js/releases/download/0.5.11/p5.js"></script> 

Answer 2

凯文的答案是伟大的，因为它会更有效地画线，而不是许多省略。 你也应该看看：

• beginShape（） / endShape（）
• bezierVertex（）
• curveVertex（）
• curvePoint（）

上面的内容可以帮助你绘制一条平滑的path，设置一个较粗的笔画将会看起来像很多填充的椭圆形成了一条path。

如果由于某种原因，你想绘制多个椭圆，你可以插入位置，当鼠标移动更快，并创build空白来填补这些差距。 有关更多信息和p5.js示例，请查看此答案： 处理：绘制vector而不是像素