Canvas（四）基本动画

个人认为canvas的魅力就在于制作精美的动画效果。

之前说过canvas的动画实际上是一张一张绘制出来的，类似电影胶片一样。所以就需要我们每次重绘前记录上一个图片的状态。

以一个区域内运动的小球为例：

基本实现思路：

小球有一个初始配置，包括起点，半径，x、y方向的运动速度。还要判断小球是否到达画布的边界，到达的话则使方向反向。

这样可以绘制小球，但小球之前的位置仍然保留，也就是说我们没有清除小球上个状态。

清空画布可以使用clearRect方法

ctx.clearRect(0, 0, canvas.width, canvas.height);

再借助requestAnimationFrame方法，就可以实现动画效果了。

有时候我们会希望更逼真一点，模拟一下视觉停留效果，也就是小球要保留一点运动轨迹的阴影，怎么实现呢？

首先不能使用clearRect方法了，它会彻底清空一片区域；这时就可以使用fillRect方法。这个方法是填充一片区域，只要我们把填充色加上透明值就可以模拟“长尾”效果了。

比如：

ctx.fillStyle = 'rgba(255, 255, 255, .3)';
ctx.fillRect(0, 0, canvas.width, canvas.height);