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使用橢圓畫布繪製路徑

回答

相關問題