Javascript p5.js带椭圆的画布绘制路径

我正在使用socket.io、node.js和p5.js开发一个实时画布绘图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]);

下面是问题的图片：

---

欢迎任何反馈；谢谢

您可以使用

pmouseX

和

pmouseY

变量，它们保持光标的上一个位置。使用它从先前位置绘制一行到当前位置，以填充鼠标事件之间的空白。 发件人：

//在画布上移动鼠标以留下轨迹
函数设置（）{
//降低帧速率以使其更可见
帧率（10）；
}
函数绘图（）{
背景（244、248、252）；
行（mouseX、mouseY、pmouseX、pmouseY）；
打印（pmouseX+“->”+mouseX）；
}

---

凯文的答案很好，因为画直线比画许多椭圆更有效。您还应研究：

• /尾形（）

上面的内容将帮助您绘制一条平滑的路径，设置一个较粗的笔划将看起来像是许多填充的椭圆连接在一起形成路径

如果出于某种原因确实要绘制许多椭圆，则可以在鼠标移动更快时插入位置，并创建间隙以填充这些间隙。 有关更多信息和p5.js示例，请查看以下答案：