用canvas写一个基本动画

首先声明，我只是一个小白，这篇文章的主要内容是MDN上的一篇教程，自己也仅仅是做一个简单学习与整理而已。原文链接https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Advanced_animations

一、首先准备画布，在画布上绘制一个小球

<canvas id="canvas" width="600" height="300"></canvas>

var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        var ball={
            x:100,
            y:100,
            vx:5,
            vy:2,
            radius:25,
            color:"blue",
            draw:function(){
                ctx.beginPath();
                ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
                ctx.closePath();
                ctx.fillStyle=this.color;
                ctx.fill();
            }
        };
        ball.draw();

这时画布中出现了一个蓝色的圆

二、添加动画，我们利用clearRect()方法清除帧中的旧图，利用window.requestAnimationFrame()方法来控制动画

var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        var ball={
            x:100,
            y:100,
            vx:5,
            vy:2,
            radius:25,
            color:"blue",
            draw:function(){
                ctx.beginPath();
                ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
                ctx.closePath();
                ctx.fillStyle=this.color;
                ctx.fill();
            }
        };
        ball.draw();
        function draw(){
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ball.draw();
            ball.x+=ball.vx;
            ball.y+=ball.vy;
            raf=window.requestAnimationFrame(draw);
        };
        canvas.addEventListener("mouseover",function(e){
            raf=window.requestAnimationFrame(draw);
        });
        canvas.addEventListener("mouseout",function(e){
            window.cancelAnimationFrame(raf);
        });

（好吧，动图有些失真，毕竟不能捕捉到每一帧动画）

三、接下来我们为这个小球运动的区域画一个边界，当达到边界时，小球运动方向自动反向,

添加以下代码：

if(ball.y+ball.vy>canvas.height||ball.y+ball.vy<0){
        ball.vy=-ball.vy;
}
if(ball.x+ball.vx>canvas.width||ball.x+ball.vx<0){
        ball.vx=-ball.vx;
}

此时完整代码如下：

var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        var ball={
            x:100,
            y:100,
            vx:5,
            vy:2,
            radius:25,
            color:"blue",
            draw:function(){
                ctx.beginPath();
                ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
                ctx.closePath();
                ctx.fillStyle=this.color;
                ctx.fill();
            }
        };
        ball.draw();
        function draw(){
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ball.draw();
                if(ball.y+ball.vy>canvas.height||ball.y+ball.vy<0){
                ball.vy=-ball.vy;
            }
            if(ball.x+ball.vx>canvas.width||ball.x+ball.vx<0){
                ball.vx=-ball.vx;
            }
            ball.x+=ball.vx;
            ball.y+=ball.vy;
            raf=window.requestAnimationFrame(draw);
        };
        canvas.addEventListener("mouseover",function(e){
            raf=window.requestAnimationFrame(draw);
        });
        canvas.addEventListener("mouseout",function(e){
            window.cancelAnimationFrame(raf);
        });

四、我们接下来添加控制小球的速度代码

ball.vy*=0.99;
ball.vy+=0.25;

完整代码如下：

<canvas id="canvas" width="600" height="300"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        var ball={
            x:100,
            y:100,
            vx:5,
            vy:2,
            radius:25,
            color:"blue",
            draw:function(){
                ctx.beginPath();
                ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
                ctx.closePath();
                ctx.fillStyle=this.color;
                ctx.fill();
            }
        };
        ball.draw();
        function draw(){
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ball.draw();
            if(ball.y+ball.vy>canvas.height||ball.y+ball.vy<0){
                ball.vy=-ball.vy;
            }
            if(ball.x+ball.vx>canvas.width||ball.x+ball.vx<0){
                ball.vx=-ball.vx;
            }
            ball.x+=ball.vx;
            ball.y+=ball.vy;
            ball.vy*=0.99;
            ball.vy+=0.25;
            console.log(ball.x,ball.y);
            
            raf=window.requestAnimationFrame(draw);
        };
        draw();
        canvas.addEventListener("mouseover",function(e){
            raf=window.requestAnimationFrame(draw);
        });
        canvas.addEventListener("mouseout",function(e){
            window.cancelAnimationFrame(raf);
        });
        
    </script>

五、我们可以为这个动画增加一个长尾效果，我们一直都是用clearRect()这个方法来清除上一帧动画， 当我们用一个半透明的fillRectangle()来取代这个时，就很容易获得长尾效果

现在完整代码如下：

<canvas id="canvas" width="600" height="300"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        var ball={
            x:100,
            y:100,
            vx:5,
            vy:2,
            radius:25,
            color:"blue",
            draw:function(){
                ctx.beginPath();
                ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
                ctx.closePath();
                ctx.fillStyle=this.color;
                ctx.fill();
            }
        };
        ball.draw();
        function draw(){
            ctx.fillStyle = 'rgba(255,255,255,0.3)';
            ctx.fillRect(0,0,canvas.width,canvas.height);
            ball.draw();
            if(ball.y+ball.vy>canvas.height||ball.y+ball.vy<0){
                ball.vy=-ball.vy;
            }
            if(ball.x+ball.vx>canvas.width||ball.x+ball.vx<0){
                ball.vx=-ball.vx;
            }
            ball.x+=ball.vx;
            ball.y+=ball.vy;
            ball.vy*=0.99;
            ball.vy+=0.25;
            console.log(ball.x,ball.y);
            
            raf=window.requestAnimationFrame(draw);
        };
        draw();
        canvas.addEventListener("mouseover",function(e){
            raf=window.requestAnimationFrame(draw);
        });
        canvas.addEventListener("mouseout",function(e){
            window.cancelAnimationFrame(raf);
        });
        
    </script>

(动画真的有点失真，将就着看吧)

六、接下来我们来增加鼠标的控制事件

var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        var running=false;
        var raf;
        var ball={
            x:100,
            y:100,
            vx:5,
            vy:2,
            radius:25,
            color:"blue",
            draw:function(){
                ctx.beginPath();
                ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
                ctx.closePath();
                ctx.fillStyle=this.color;
                ctx.fill();
            }
        };
        function clear(){
            ctx.fillStyle = 'rgba(255,255,255,0.3)';
            ctx.fillRect(0,0,canvas.width,canvas.height);
        }
        ball.draw();
        function draw(){
            clear();
            ball.draw();
            if(ball.y+ball.vy>canvas.height||ball.y+ball.vy<0){
                ball.vy=-ball.vy;
            }
            if(ball.x+ball.vx>canvas.width||ball.x+ball.vx<0){
                ball.vx=-ball.vx;
            }
            ball.x+=ball.vx;
            ball.y+=ball.vy;
            
            raf=window.requestAnimationFrame(draw);
        };
        canvas.addEventListener("mouseover",function(e){
            if(!running){
                clear();
                ball.x=e.clientX;
                ball.y=e.clientY;
                ball.draw();
            }
        });
        canvas.addEventListener("mouseout",function(e){
            window.cancelAnimationFrame(raf);
            running=false;
        });
        canvas.addEventListener("click",function(e){
            if(!running){
                raf=window.requestAnimationFrame(draw);
                running=false;
            }
        })

好吧，这时候已经有点卡了，就不贴图了，所以canvas的动画性能的优化还是很有必要的。

最后是一个广告贴，最近新开了一个分享技术的公众号，欢迎大家关注👇