贝塞尔曲线动态创建？

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事件中，更新草曲线信息，然后“重绘”。