<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="demo" width="800" height="400" style="border: 1px solid red;"></canvas></body><script> var can = document.getElementById('demo'); var ctx = can.getContext('2d'); var timer=null; var img = new Image(); img.src = 'imgs/NPC2.png'; img.onload = function(){ ctx.drawImage(img,0,0,40,65,200,200,80,130); } window.onkeydown=function(event){ var zz=0; var event=event||window.event; switch (event.keyCode){ case 37: zz=1; break; case 38: zz=3; break; case 39: zz=2; break; case 40: zz=0; break; }animate(img,zz); } window.onkeyup=function(e){ var event=event||window.event; if (event.keyCode==37||38||39||40) { clearInterval(timer); } } function animate(obj,target){ clearInterval(timer); var f=0; timer=setInterval(function(){ f++; f%=4; console.log(f); ctx.clearRect(200,200,80,130); ctx.drawImage(obj,f*40,target*65,40,65,200,200,80,130); },30); }</script></html>
解决方案 »
免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货