p5.js canvas 用椭圆绘制路径

Question

我正在使用 socket.io、node.js 和 p5.js 开发实时 canvas 绘图 Web 应用程序。拖动鼠标时无法创建平滑线。如果鼠标拖得太快，每个椭圆之间会有一条空 space 的轨迹。这里的最终目标是创建一条平滑的路径。以下是我到目前为止尝试过的方法：

尝试 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

您可以使用 pmouseX 和 pmouseY 变量，它们保存光标的前一个位置。使用它从先前位置到当前位置绘制一条线以填充鼠标事件之间的空白 space。

来自the reference：

// 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

凯文的回答很好，因为画线比画很多椭圆更有效率。您还应该查看：

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

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

p5.js canvas 用椭圆绘制路径

p5.js canvas drawing path with ellipses

html

javascript

canvas

node.js

p5.js