贝塞尔曲线动态创建？答案

【问题标题】：bezier curve creation dynamically?贝塞尔曲线动态创建？
【发布时间】：2013-05-27 12:17:42
【问题描述】：

我正在尝试在使用三次贝塞尔曲线创建的直线上实现草状弯曲。我已经使用贝塞尔曲线创建了一条直线，现在我想从顶部弯曲它。但我面临的问题是我无法动态地完成它。当我使用鼠标移动创建弯曲时，出现一系列曲线，使画布看起来像油漆一样是我不想要的东西。我只想要一条曲线。我的问题是如何清除之前绘制的线条并恢复最新的弯曲曲线？我的密码：here is my code if you want to have a look at it

【问题讨论】：

标签： javascript html canvas html5-canvas bezier

【解决方案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当然可以随便叫什么。

【讨论】：

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

【讨论】：