我正在尝试在使用三次贝塞尔曲线创建的直线上实现草状弯曲。我使用贝塞尔曲线创建了一条直线,现在我想从顶部弯曲它。但我面临的问题是我无法动态地做。当我使用鼠标移动创建弯曲时,出现一系列曲线,使画布看起来像油漆一样,这是我不想要的。我只想要一条曲线。我的问题是如何清除前面的线条已经绘制并恢复了最新的弯曲曲线??我的代码:如果你想看一下,这是我的代码
user2412575
问问题
817 次
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
有关如何制作此跨浏览器的链接,因为这仍然是一个“年轻”的实现。
dynCtx
dynCanvas
当然可以叫你想要的。
于 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 回答