1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>绘制小人动画</title>
6 <style>
7 canvas{
8 border: 1px solid green;
9 }
10 </style>
11 </head>
12 <body>
13 <!-- 绘制小人动画 -->
14 <canvas width="400" height="600" id="canvas"></canvas>
15 </body>
16 <script>
17 var canvas = document.getElementById('canvas');
18 var ctx = canvas.getContext('2d');
19 function toAngle(radian){
20 return radian*180/Math.PI;
21 }
22 function toRadian(angle){
23 return angle*Math.PI/180;
24 }
25 function img(ctx,element,x0,y0){
26 var x = x0,
27 y = y0;
28 element.onload = function(){
29 var width = element.width/4,
30 height = element.height/4;
31 var i = 0,
32 j = 0,
33 a = 0;
34 setInterval(function(){
35 //x = x a;
36 ctx.clearRect(x,y,width,height);
37 ctx.drawImage(element,width*i,height*j,width,height,x,y,width,height);
38 i ;
39 if(i == 4){
40 setTimeout(function(){
41 i = 0;
42 if(j == 0){
43 j =1;
44 //a-=10;
45 }else if(j == 1){
46 j = 3;
47 }else if(j == 2){
48 j = 0;
49 }else if(j == 3){
50 j = 2;
51 //a =10;
52 }
53 },20)
54 }
55 },200)
56 }
57 };
58 var img1 = new Image();
59 img1.src = 'imgs/game1.png';
60 var img2 = new Image();
61 img2.src = 'imgs/game2.png';
62 var img3 = new Image();
63 img3.src = 'imgs/game3.png';
64 var img4 = new Image();
65 img4.src = 'imgs/game4.png';
66 var img5 = new Image();
67 img5.src = 'imgs/game5.png';
68 var img6 = new Image();
69 img6.src = 'imgs/game6.png';
70 var img7 = new Image();
71 img7.src = 'imgs/game7.png';
72 var img8 = new Image();
73 img8.src = 'imgs/game8.png';
74 var img9 = new Image();
75 img9.src = 'imgs/game9.png';
76 var img10 = new Image();
77 img10.src = 'imgs/game10.png';
78 var img11 = new Image();
79 img11.src = 'imgs/game11.png';
80 var img12 = new Image();
81 img12.src = 'imgs/game12.png';
82 img(ctx,img1,0,0);
83 img(ctx,img2,50,0);
84 img(ctx,img3,100,0);
85 img(ctx,img4,150,0);
86 img(ctx,img5,200,0);
87 img(ctx,img6,250,0);
88 img(ctx,img7,300,0);
89 img(ctx,img8,350,0);
90 img(ctx,img9,0,100);
91 img(ctx,img10,50,100);
92 img(ctx,img11,100,100);
93 img(ctx,img12,150,100);
94 </script>
95 </html>/这边是自己封装了一个函数，其实从性能优化的角度来考虑，我们可以先在内存中创建一个canvas标签，将这个图画放在内存中的canvas里面，再将内存中创建好的canvas放到页面上的这个canvas标签上，这只是一个思路，希望大家可以往这方面考虑
更多专业前端知识，请上 【猿2048】www.mk2048.com
