貝塞爾曲線動態創建？

Question

我試圖通過使用Cubic bezier曲線在直線上實現彎曲。我使用Bezier曲線創建了一條直線，現在我想從頂部彎曲它。但我面臨的問題是我無法做動態 .The目前我使用鼠標移動創建的彎，一系列的曲線出現讓畫布般的外觀油漆是財產以后我不want.I只想要一個可以彎曲line.My問題是，我該如何清除之前的線已繪制並恢復最新的彎曲曲線？ 我的代碼： 如果你想查看它，這是我的代碼

Answer 1

創建兩個堆疊在彼此之上的畫布：

第一個包含靜態內容，另一個只包含動態內容。

通過這種方式，您只需要關注清除草被吸入的區域（這也更快，因為不需要一直重繪靜態）。

將兩個畫布放在div中，其位置設置為相對，然后使用設置為絕對的位置放置畫布。

現在你可以創建一個繪制靜態內容的函數（如果瀏覽器窗口調整大小等，你需要重繪它）。

記錄草被繪制的區域，並在下一幀中僅清除（對於每個草）。

如果這最后太復雜，只需在“動態”畫布上使用簡單的清除：

ctxDyn.clear(0, 0, canvasDyn.width, canvasDyn.height);

如果您願意，這也將保留此畫布或“圖層”的透明度。

使用requestAnimationFrame來執行實際動畫。

var isPlaying = true;

function animate() {

    ctxDyn.clear(0, 0, canvasDyn.width, canvasDyn.height);

    drawGrass(); //function to draw the actual grass

    if (isPlaying) requestAnimationFrame(animate);
}

animate(); // start

isPlaying是一個標志，您可以使用屏幕上的按鈕或類似的東西切換，以便能夠停止動畫。 請參閱requestAnimationFrame的鏈接，了解如何制作此跨瀏覽器，因為這仍然是一個“年輕”實現。

dynCtx和dynCanvas當然可以被稱為你想要的。

Answer 2

在重新繪制更新的“草”之前，您需要擦除畫布的當前內容。 這將涉及重繪畫布上“靜態”的所有其他內容。 例如：

function redraw() {
  // Erase the current contents
  ctx.fillStyle = 'white';
  ctx.fill(0, 0, canvas.width, canvas.height);

  // Draw the stuff that does not change from frame to frame
  drawStaticContent();

  // Draw the dynamic content
  drawGrass();
}

在mousemove事件中，更新草曲線信息，然后“重繪”。