第一章 基础知识

    图1-16之中的应用程序代码，获取了指向玻璃窗格以及动画控制按钮的引用，并向其增加了事件处理器，像是这样：

    var context =document.getElementById('canvas').getContext('2d'),

    startButton =document.getElementById('startButton'),

    glasspane =document.getElementById('glasspane'),

    paused = false,

    ...

   startButton.onclick = function(e) {

   e.preventDefault();

   paused = ! paused;

   startButton.innerHTML = paused ? 'Start' :'Stop';

};

...

glasspane.onmousedown = function(e) {

   e.preventDefault();

};

    上述JavaScript代码向按钮控件增加了一个onclick事件处理器，该监听器根据应用程序当前的状态来启动或暂停动画效果，这段代码同时还向玻璃窗格控件增加了一个onmousedown事件处理器，用以阻止浏览器对于鼠标点击的默认反应。onmousedown事件处理器将会阻止浏览器对该事件做出反应，以避免用户无意间选中了玻璃窗格控件。

    提示：实现基于Canvas的自定义控件

    Canvas规范中说，应该首先考虑使用内置的HTML控件，而非使用Canvas API来从头实现控件。这通常是个好的建议。要是想用Canvas API来编写全新的控件，一般来说，会涉及大量的工作。在大多数情况下，如果有某种更为简单的方法可用，我们就应该明智一些，不要为了实现它而花费那么多功夫。

    然而，在某些情况下，确实有必要去实现基于Canvas的控件。在本书第10章中，你将看到实现这些控件的动机及其实现方式。

    提示：网格的绘制

    本节讨论的这个应用程序在跳动的小球背后绘制了网格线，用以强调浮动的DIV元素确实是浮在canvas之上的。

    在本书第2章中，我们将讨论绘制网格的方法，不过现在，你可以先放心地往下读，不必担心网格绘制的细节问题。

    不可见的HTML元素

    在前一小节中，读者已经知道了如何将静态的HTML控件与canvas联合起来使用。本小节我们将研究一种更为高级的HTML控件使用方法，也就是在用户拖动鼠标时动态地修改DIV元素的大小。

    图1-17中所示的这个应用程序，采用了一种名为“橡皮筋式”（rubberbanding）选取框的技术来让用户在canvas之中选择某个区域。起初，该canvas会显示一幅图像，然后当选定图像的某一部分时，应用程序会将你所选的这部分区域放大。

图1-17　使用DIV元素来实现橡皮筋式选取框

    首先，我们来看看程序清单1-9中列出的应用程序HTML代码。