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

Question

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

Answer 1

创建两个 Canvas 堆叠在一起:

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

这样，您只需要关心清除绘制草的区域(这也快得多，因为不需要一直重绘静态)。

将两个 Canvas 放置在一个 div 中，其位置设置为相对，然后使用位置设置为绝对来放置 Canvas 。

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

记录绘制草的区域，并在下一帧中仅清除该区域(对于每棵草)。

如果最后一个太复杂，只需在“动态” Canvas 上使用简单的清除:

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

这还将保留此 Canvas 或“图层”(如果您愿意)的透明度。

使用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 当然可以被称为你想要的名称。