利用canvas来绘制一个会动的图画，欢迎指教 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制小人动画</title>
    <style>
        canvas{
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <!-- 绘制小人动画 -->
    <canvas width="400" height="600" id="canvas"></canvas>
</body>
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    function toAngle(radian){
        return radian*180/Math.PI;
    }
    function toRadian(angle){
        return angle*Math.PI/180;
    }
    function img(ctx,element,x0,y0){
        var x = x0,
            y = y0;
        element.onload = function(){
            var width = element.width/4,
            height = element.height/4;
            var i = 0,
                j = 0,
                a = 0;
            setInterval(function(){
                //x = x + a;
                ctx.clearRect(x,y,width,height);
                ctx.drawImage(element,width*i,height*j,width,height,x,y,width,height);
                i ++;
                if(i == 4){
                    setTimeout(function(){    
                        i = 0;
                        if(j == 0){
                            j =1;
                            //a-=10;
                        }else if(j == 1){
                            j = 3;
                        }else if(j == 2){
                            j = 0;
                        }else if(j == 3){
                            j = 2;
                            //a+=10;
                        }
                    },20)
                }
            },200)
        }
    };
        var img1 = new Image();
        img1.src = 'imgs/game1.png';
        var img2 = new Image();
        img2.src = 'imgs/game2.png';
        var img3 = new Image();
        img3.src = 'imgs/game3.png';
        var img4 = new Image();
        img4.src = 'imgs/game4.png';
        var img5 = new Image();
        img5.src = 'imgs/game5.png';
        var img6 = new Image();
        img6.src = 'imgs/game6.png';
        var img7 = new Image();
        img7.src = 'imgs/game7.png';
        var img8 = new Image();
        img8.src = 'imgs/game8.png';
        var img9 = new Image();
        img9.src = 'imgs/game9.png';
        var img10 = new Image();
        img10.src = 'imgs/game10.png';
        var img11 = new Image();
        img11.src = 'imgs/game11.png';
        var img12 = new Image();
        img12.src = 'imgs/game12.png';
        img(ctx,img1,0,0);
        img(ctx,img2,50,0);
        img(ctx,img3,100,0);
        img(ctx,img4,150,0);
        img(ctx,img5,200,0);
        img(ctx,img6,250,0);
        img(ctx,img7,300,0);
        img(ctx,img8,350,0);
        img(ctx,img9,0,100);
        img(ctx,img10,50,100);
        img(ctx,img11,100,100);
        img(ctx,img12,150,100);
</script>
</html>

 

//这边是自己封装了一个函数，其实从性能优化的角度来考虑，我们可以先在内存中创建一个canvas标签，将这个图画放在内存中的canvas里面，再将内存中创建好的canvas放到页面上的这个canvas标签上，这只是一个思路，希望大家可以往这方面考虑

posted @ 2017-02-21 21:21  一混五六年  阅读(1742)  评论(0)  编辑  收藏  举报