javascript - 动态创建贝塞尔曲线？

Question

我正在尝试在使用三次贝塞尔曲线创建的直线上实现草状弯曲。我使用贝塞尔曲线创建了一条直线，现在我想从顶部弯曲它。但我面临的问题是我无法动态地做。当我使用鼠标移动创建弯曲时，出现一系列曲线，使画布看起来像油漆一样，这是我不想要的。我只想要一条曲线。我的问题是如何清除前面的线条已经绘制并恢复了最新的弯曲曲线？？我的代码：如果你想看一下，这是我的代码

Answer 1

创建两个相互堆叠的画布：

第一个包含静态内容，另一个仅包含动态内容。

这样你只需要关心清除草被绘制的区域（这也更快，因为不需要一直重绘静态）。

将两个画布放在位置设置为相对的 div 内，然后使用位置设置为绝对放置画布。

现在您可以创建一个函数来绘制静态内容（如果浏览器窗口被调整大小等，您将需要重新绘制它）。

记录绘制草的区域，并在下一帧中仅清除此区域（对于每棵草）。

如果最后一个太复杂，只需在“动态”画布上使用简单的 clear ：

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有关如何制作此跨浏览器的链接，因为这仍然是一个“年轻”的实现。

dynCtxdynCanvas当然可以叫你想要的。

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