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
代码实现：
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var x=20; //起点坐标x
var y=200; //起点坐标y
//x与y轴方向加速度
var xspeed = 2;
var yspeed = -3;
//一步draw函数：画球
function draw(){
//水平位置到达左边或右边，则翻转水平速度方向
if(x<20 || x>canvas.width-20){
xspeed = -xspeed;
} //垂直位置到达上边沿或下边沿，则翻转垂直速度方向
if(y<20 || y>canvas.height-20){
yspeed = -yspeed;
}
context.clearRect(0, 0, canvas.width, canvas.height); //擦除上一步球
context.beginPath(); //换新纸
context.arc(x, y, 20, 0, 2*Math.PI); //画圆
context.fill(); //填充印制
x += xspeed; //下一步球的x坐标值
y += yspeed; //下一步球的y坐标值
window.requestAnimationFrame(draw); //动画：递归调用自适应帧率
}
draw(); //第一次调用，触发动画
</script>
2018.1.15
