Question

我试图在使用立方贝塞尔曲线创建的直线上实现像弯曲一样的草。我使用贝塞尔曲线创建了一条直线，现在我想要从顶部弯曲。但我面临的问题是我无法动态动态。当我使用mousemove创建弯曲时，一系列曲线出现给画布一个像外观的颜料是我不想要的东西。我只想要一条曲线。我的问题是如何清除以前绘制的线并恢复最新的弯曲曲线？我的代码：here is my code if you want to have a look at it

Answer 1

创建彼此叠加的两个画布：

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

通过这种方式，您只需要关注清除草被吸入的区域（这也快得多，因为不需要一直重绘静态）。

将两幅画布放置在div位置设置为相对的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事件中，更新草曲线信息，然后'重绘'。

贝塞尔曲线动态创建？

2 个答案: