<!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標簽上，這只是一個思路，希望大家可以往這方面考慮