关于解决HTML5画布中长按按键动作不流畅的小技巧

本人在用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共同间接的控制了小球的运动。