利用canvas来绘制一个会动的图画

时间：2021-06-05 14:46:09
 <!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标签上，这只是一个思路，希望大家可以往这方面考虑

相关文章