二维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

代码实现：

<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