利用canvas來繪制一個會動的圖畫
阿新 • • 發佈：2018-09-07
onload body return 封裝 ear html toa oct --
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; 31var 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標簽上，這只是一個思路，希望大家可以往這方面考慮
利用canvas來繪制一個會動的圖畫