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>