p5.js使用椭圆画布绘制路径

我正在使用socket.io，node.js和p5.js在实时画布上绘制webapp。拖动鼠标时无法创建平滑线。如果鼠标拖得太快，每个椭圆之间会有一段空的空间。这里的最终目标是创造一条平坦的道路。这是到目前为止，我已经试过的东西：p5.js使用椭圆画布绘制路径

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

欢迎任何反馈;谢谢！

来源

2017-07-27 chiken

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

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

来源

2017-07-27 20:19:58

凯文的答案是伟大的，因为这将是更有效地画线，而不是许多椭圆。你还应该考虑：

以上应该可以帮助您绘制平滑路径，并设置较厚的行程会看起来像很多填充椭圆形连接在一起形成了路径。

如果由于某种原因您确实想绘制多个省略号，您可以在鼠标移动速度更快时创建位置并创建间隙来填补这些差距。欲了解更多信息和p5.js的例子，看看这个答案： Processing: Draw vector instead of pixels

来源

2017-07-28 11:07:18

p5.js使用椭圆画布绘制路径

回答

相关问题