标签：
本人在用canvas做个通过按键控制目标移动的效果的时候发现，使用onkeydown事件处理的现象是：长按一个按键先动一下然后停一下，然后按照系统固定的频率重复输出该按键的值（具体没仔细研究），运动效果不尽人意。既然我们想要的效果是长按按键的时候触发事件，松开就结束，那么我们可以为事件添加一个状态，就可以避免这种情况。具体实现如下：
HTML部分
<canvas width="800" height="100" id="canvas"></canvas> <!--拟设置一个宽800px，高100px的画布-->
JS部分
1 <script type="text/javascript"> 2 var canvas=document.getElementById(‘canvas‘).getContext(‘2d‘); 3 var a=50,i=0;//其中a为小球的横坐标，i=0时小球不右移，i=1时右移； 4 var move=setInterval(function(){ 5 //重绘背景 6 canvas.fillStyle="white"; 7 canvas.fillRect(0,0,800,100); 8 //绘制小球 9 canvas.beginPath(); 10 canvas.arc(a,50,50,0,Math.PI*2,false); 11 canvas.fillStyle="black"; 12 canvas.closePath(); 13 canvas.fill(); 14 //设置停止 15 if(a==550){ 16 clearInterval(move); 17 } 18 //当i=1时右移 19 if(i==1){ 20 a+=5; 21 } 22 },10); 23 //绑定按键事件 24 document.onkeydown=function(event){ 25 var e=window.event||arguments[0]; 26 if(e.keyCode==39){//方向键→ 27 i=1; 28 document.onkeyup=function(){ 29 i=0; 30 } 31 } 32 } 33 </script>
当我们按下设定按键之后状态值i等于1，小球的运动跟随定时器周期；当松开按键的时候，状态值i变回0，停止运动。这是嵌套了onkeyup事件，与onkeydown共同间接的控制了小球的运动。
标签：
原文地址：http://www.cnblogs.com/blog328015920/p/5014611.html
