Canvas事件处理及示例代码分析

  Canvas中常见的事件是鼠标事件和键盘事件，但根据参考文献1，Canvas本身不支持键盘事件，一般都采用window对象监听和处理Canvas中的键盘事件。
  HTML5中的鼠标事件如下图所示，其中标New的是HTML5新增属性事件。本文中主要使用mousemove鼠标事件：

  HTML5中的键盘事件如下所示，图中从上往下的顺序也是用户按下键盘后触发的键盘事件顺序。本文中主要使用keydown键盘事件。

  除了事件处理，参考文献1中还介绍了如何在Canvas中实现动画效果，主要是包括使用setInterval函数或者是用window对象的requestAnimationFrame设置循环事件。这两个函数都是实现周期性的绘制图形的函数，不同之处在于setInterval需要手动设置间隔时间，而requestAnimationFrame是浏览器下次重绘之前调用指定的回调函数更新绘制的图形（详细介绍请查看参考文献4）。
  基于参考文献1中的示例代码，对Canvas事件处理进行简要分析和说明。

获取鼠标位置

  该程序的效果是随着鼠标在Canvas中移动，在Canvas下方实时显示鼠标坐标。程序的效果图如下所示：

  程序的关键之处在于注册了Canvas的mousemove事件处理函数，在该函数中获取鼠标在Canvas中的坐标，然后显示在Canvas下方的段落中。程序的关键代码是兼容不同浏览器中的鼠标坐标获取方式，主要代码如下：

	var x,y;
    var e=e|| window.event;
    if(e.pageX || e.pageY)
    {
        x=e.pageX;
        y=e.pageY;
    }
    else
    {
        x=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
        y=e.clientY+document.body.scrollTop+document.documentElement.scrollTop;
    }

键盘操作小球

  该程序的效果是Canvas中的小球会随着用户按上（↑或w）、下（↓或s）、左（←或a）、右（→或d）键而向上、下、左、右移动。程序的效果图如下（暂时没法插动画，所以看不出来实际效果）：

  程序的关键之处在于注册了页面的keydown事件处理函数，在该函数中根据用户的按键判断Canvas中小球的移动方向，然后更新小球的坐标，最后重绘小球。程序主要代码如下：

	var keyPressed=tools.getKey();
    window.addEventListener("keydown",function(e)
     {
         cxt.clearRect(0,0,cnv.width,cnv.height);

         switch(keyPressed.direction)
         {
             case "up":
                 y-=2;
                 break;

             case "down":
                 y+=2;
                 break;

             case "left":
                 x-=2;
                 break;

             case "right":
                 x+=2;
                 break;
         }

         drawBall(x,y);
     },false
     );

循环移动小球

  该程序的效果是Canvas中的小球从左到右自动移动，当到达右侧边界后会自动重新出现在左侧，循环不止。程序的效果图如下（暂时没法插动画，所以看不出来实际效果）：

  程序的关键之处在于在Canvas中设置循环事件，在循环事件中自动更新小球的横坐标，当小球横坐标大于Canvas右侧便捷时，自动重置小球横坐标。程序的关键代码如下：

	   var cnv=$$("canvas");
       var cxt=cnv.getContext("2d");
       var x=0;

       (function frame()
       {
           window.requestAnimationFrame(frame);
           cxt.clearRect(0,0,cnv.width,cnv.height);

           cxt.beginPath();
           cxt.arc(x,70,20,0,360*Math.PI/180,true);
           cxt.closePath();
           cxt.fillStyle="#6699FF";
           cxt.fill();

           x+=2;

           if(x>cnv.width)
           {
               x=0;
           }
       })();    

参考文献：
[1]从0到1 HTML5 Canvas动画开发
[2]https://www.w3.org/TR/2dcontext/
[3]https://www.runoob.com/tags/ref-eventattributes.html
[4]https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame