html - 画布绘制效果

Question

我从一些简单到复杂的画布脚本开始。我想画一个圆圈。这很容易。问题是圆圈是立即绘制的。如果我想让圆圈慢慢变大怎么办（让我们说从一条垂直线到一个半圆，到一个半圆，再到一个完整的圆）画布中有什么方法可以做到这一点（本机）还是我需要做一个建立和删除几个圆圈（快速）来模拟效果的函数？

如果后者是真的，是否有任何我应该注意的性能问题？

谢谢！

Answer 1

使用画布的任何形式的动画都需要清除画布并制作序列中的下一个绘图。Mozilla 开发网络有一个很好的关于画布和画布动画的教程。

Answer 2

查看animate.js库。它正是您所需要的。用法与 jQueryUI 相同。

您需要的可以通过以下代码完成：

canvas_element.animateCircle(x,y,r);

还有其他可选参数，例如animateCircle(x,y,r,{'lineWidth':5, 'lineColour':'red', 'stop': function() {alert('completed');}})& 其他一些功能。查看自述文件了解详细信息。