第一章 基础知识

}

// Event handlers.....................................................

canvas.onmousemove = function (e) {

   var loc = windowToCanvas(canvas, e.clientX,e.clientY);

   drawBackground();

   drawSpritesheet();

   drawGuidelines(loc.x, loc.y);

   updateReadout(loc.x, loc.y);

};

//Initialization.....................................................

spritesheet.src = 'running-sprite-sheet.png';

spritesheet.onload = function(e) {

   drawSpritesheet();

};

drawBackground();

    小技巧：x、y属性与clientX、clientY属性

    在HTML5规范出现之前，通过浏览器传给事件监听器的事件对象，来获取鼠标事件发生的窗口坐标，其实现方法非常混乱。有些浏览器将坐标存放在x、y属性之中，另外一些则将其存放于clientX、clientY属性中。所幸，当前支持HTML5的浏览器最终达成一致，它们都支持clientX与clientY属性了。有关这些事件属性的详细信息，请参阅：http://www.quirksmode.org/js/events_mouse.html。

    小技巧：让浏览器不再干预事件处理

    当你在监听鼠标事件时，一旦相关的事件发生，浏览器就会调用你所注册的监听器。在处理完某个事件后，浏览器可能也会对该事件作出反应。大多数情况下，如果在canvas中处理了某个鼠标事件，那么处理完之后，就不会再需要浏览器也去处理它了。因为如果那样的话，可能会导致一些不好的效果，比如浏览器会选中其他HTML元素，或者改变光标的位置等等。

    幸好事件对象中有一个preventDefault()方法，顾名思义，它可以阻止浏览器对该事件作出默认的反应。在你所编写的事件处理器（event handler，也叫事件句柄、事件处理程序，本译文中均使用“事件处理器”这个叫法。—译者注）代码中调用该方法，浏览器就不会再干预该事件的处理了。

    提示：Canvas绘图环境对象的drawImage()方法

    图1-14中那个程序的范例代码，使用了2d绘图环境对象的drawImage()方法来绘制精灵表。该方法可以将某图像的全部或者一部分从某个地方复制到一个canvas之中。如果有需要的话，还可以在复制的过程中对图像进行缩放。

    精灵表应用程序的代码，以最为简单的形式调用了该方法：它将存放于Image对象中的全部图像内容，未经缩放地绘制到应用程序的canvas之中。在本书剩下的章节中，尤其是第4章中，将看到更多有关drawImage()方法的高级应用。

    1.6.2　键盘事件

    当在浏览器窗口中按下某个键时，浏览器将会生成键盘事件。这些事件发生在当前拥有焦点的HTML元素身上。假如没有元素拥有焦点，那么事件的发生地将会上移至window与document对象。

    canvas是一个不可获取焦点的元素，所以，根据上一段中所讲的内容，在canvas元素上新增键盘事件监听器是徒劳的。如果想要检测键盘事件的话，你应该在document或window对象上新增键盘事件监听器才对。

    一共有三种键盘事件：

    ·keydown

    ·keypress

    ·keyup

    keydown与keyup是底层事件，几乎每次按键时，浏览器都会触发这些事件。请注意，有些按键敲击动作，例如某个特定的组合键，会被浏览器或操作系统吞掉，不过，绝大部分按键敲击，包括Alt、Esc等按键 ，还是能够通知给keydown与keyup事件处理器的。