0

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

4

2 回答 2

2

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

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

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

将两个画布放在位置设置为相对的 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当然可以叫你想要的。

于 2013-05-27T21:00:54.290 回答
0

在重新绘制更新的“草”之前,您需要擦除画布的当前内容。这将涉及重新绘制画布上“静态”的所有其他内容。例如:

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

于 2013-05-27T14:49:27.747 回答