二维CANVAS动画（自适应帧率）

CANVAS中实现动画有两种方式：

方式一：JS普通计时器

以60帧率速度为例：setInterval(func, 16.7);

• 缺点：setInterval会丢帧

方式二：专门做CANVAS动画的方法，自适应浏览器的帧率

window.requestAnimationFrame(func);

• 用法：递归（在函数中调用自己）调用，来执行动画函数func
• 注意：需要手动调用第一次

CANVAS动画案例：弹球

场景：canvas画板中印制小球进行弹射的自由运动。
呈现效果：

弹球实现.gif

给出小球的起点、终点、运动方向（x轴方向和y轴方向）。

小球的实际运动方向，为xspeed与yspeed的合力（妈蛋理科基础差学起来真费劲）
小球每一步的布长由xspeed与yspeed决定（具体数值做勾股运算可得出）
触边条件：小球的绘制参考点为圆心(x,y)，故判断条件为实时x，y值
触边后，只需将相应方向（水平或垂直）的速度取相反数即可

弹球动画分析.png

代码实现：

---

2018.1.15