1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <div id="container"> 9 <canvas id="cavsElem"> 10 你的瀏覽器不支持canvas，請升級瀏覽器 11 </canvas> 12 <button id="btn-dir-left">向左</button> 13 <button id="btn-dir-right">向右</button> 14 <button id="btn-dir-up">向后</button> 15 <button id="btn-dir-down">向前</button> 16 </div> 17 <script> 18 (function(){ 19 var canvas = document.querySelector( '#cavsElem' ); 20 var ctx = canvas.getContext( '2d' ); 21 canvas.width = 200; 22 canvas.height = 200; 23 canvas.style.border = "1px solid #000"; 24 var dirIndex=0;//設置方向的索引 25 //加載圖片 26 var img=new Image(); 27 img.src='gameImgs/DMMban.png'; 28 //繪制精靈圖片 29 img.onload=function(){ 30 var frameIndex=0; 31 setInterval(function(){ 32 //清除 之前的 圖片墨跡的第一種方法：。 33 ctx.clearRect(0,0,canvas.width,canvas.height); 34 // 第二種方法：canvas.width=canvas.width 35 ctx.drawImage( 36 img 37 ,frameIndex*45//截取原始圖片的 x坐標 38 ,dirIndex*65//截取原始圖片的 y坐標 39 ,40//截取原始圖片的 寬度 40 ,65 // 截取的高度 41 ,200//圖片在canvas畫布上的x坐標 42 ,200//圖片在canvas畫布上的y坐標 43 ,80//繪制圖片的寬度 44 ,130//繪制圖片的高度 45 ); 46 frameIndex++; 47 frameIndex%=4;//要求frameIndex的值小於等於四 48 },1000/10) 49 } 50 }()); 51 </script> 52 </body> 53 </html>