<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 1210px; height: 610px; margin:0 auto } #ocanvas{ border: 1px solid #c3c3c3; } </style> </head> <body> <div class="box"><canvas width="1200" height="600" id="ocanvas"> 对不起你的浏览器不支持 </canvas> </div> <script> var ocanvas=document.getElementById("ocanvas"); var ctx=ocanvas.getContext("2d"); var num=0; var m=1; var n=1; var k=0; var oimg1=new Image(); var oimg2=new Image(); var oimg3=new Image(); var oimg4=new Image(); var oimg5=new Image(); oimg1.src="image/1.png"; oimg2.src="image/2.png"; oimg3.src="image/3.png"; oimg4.src="image/4.png"; oimg5.src="image/5.png"; function fun() { // k+=3; num++; if(num>=6){ num=1 } if(num==1) { setTimeout( function () { ctx.clearRect(50*m, 10*n,100+k,100); ctx.drawImage(oimg1, 50*m+k, 10*n) },100) } if(num==2) { setTimeout( function () { ctx.clearRect(50*m, 10*n,100+k,100); ctx.drawImage(oimg2, 50*m+k, 10*n) },100) } if(num==3) { setTimeout( function () { ctx.clearRect(50*m, 10*n,100+k,100); ctx.drawImage(oimg3, 50*m+k, 10*n) },100) } if(num==4) { setTimeout( function () { ctx.clearRect(50*m, 10*n,100+k,100); ctx.drawImage(oimg4, 50*m+k, 10*n) },100) } if(num==5) { setTimeout( function () { ctx.clearRect(50*m, 10*n,100+k,100); ctx.drawImage(oimg5, 50*m+k, 10*n) },100) } } var time1=setInterval(fun,100); document.onkeydown=function (e) { clearInterval(time1); ctx.clearRect(0, 0,1200,600); var ev=e|| event; var keycode=ev.keyCode; switch(keycode){ case 37: m--;break; case 38: n--;break; case 39: m++;break; case 40: n++;break; } }; document.onkeyup = function(e) { var ev = e|| event; var keycode=ev.keyCode; time1=setInterval(fun,100); } </script> </body> </html>
人物行走
猜你喜欢
转载自blog.csdn.net/moonlight201868/article/details/81227023
今日推荐
周排行