《HTML5 Canvas开发详解》——1.5 HTML5 Canvas版“Hello World！”

本节书摘来自异步社区《html5 canvas开发详解》一书中的第1章，第1.5节,作者： 【美】steve fulton , jeff fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。

如前所述，将canvas放入html5页面时第一件要做的事，就是看看整个页面是否已经加载，并且开始操作前是否所有html元素都已展现。用canvas处理图像和声音的时候这点会非常重要。

为此，这里要使用javascript的事件。当定义的事件发生时，事件从对象发出。其他对象监听事件，这样就可以基于事件进行处理。用javascript可以监听对象的一些常见事件，包括键盘输入、鼠标移动以及加载结束。

第一个需要监听的事件是window对象的load事件。该事件在html页面加载结束时发生。

要为事件添加一个监听器，可以使用dom的对象的addeventlistener()方法。因为window代表html页面，所以它是最高级别的dom对象。

addeventlistener()函数接受以下3个参数。

事件：load

这是监听器的事件名称。对于诸如window的已有对象的事件已经预先定义过。

事件处理器函数：eventwindowloaded()

当事件发生时调用这个函数。在代码中会调用canvasapp()函数来开始执行主应用程序。

usecapture：true或false

这个参数设置函数是否在事件传递到dom对象树的底层对象之前捕捉此种类型的事件。此处始终设为false。

下面是用来测试window是否加载完毕的最终代码。

另外，也可以用许多其他方式为load事件设置事件监听器。

或者使用如下代码。

本书使用第一种方法。

1.5.1　为canvas封装javascript代码

前面已经创建了一种测试html页面是否加载完毕的方法，下面将开始创建javascript应用程序。因为javascript在html页面中运行，所以它可以与其他javascript应用程序和代码一起运行。通常，这不会导致什么问题。但是，可能会出现一种情况，即代码中的变量或者函数会与html页面中的其他javascript代码产生冲突。

canvas应用程序与在浏览器中运行的其他应用有所不同，由于canvas只在屏幕上特定的区域执行显示结果，它的功能可以说是独占的，所以不太会受到页面上的其他内容影响，反之亦然。读者可能还想在同一个页面上放置多个canvas应用，那么在定义javascript代码时必须将对应的代码分开。

为避免这个问题，可以将变量和函数都封装在另一个函数中。javascript函数本身就是对象，javascript对象既可以有属性也可以有方法。将一个函数放到另一个函数中，读者可以使第二个函数只在第一个函数的局部作用域中。

在示例中将使从window load事件中调用的canvasapp()函数包含整个canvas应用程序。 “hello world!”示例中将会有一个名为drawscreen()的函数。一旦canvasapp()被调用，则立即调用drawscreen()来绘制“hello world!”文本。

drawscreen()函数现在是canvasapp()的局部函数。在canvasapp()中创建的任何变量或函数对于drawscreen()来说都是局部的。但是对于html页面的其余部分或其他可能运行的javascript应用程序来说并非如此。

以下是如何封装函数的示例代码，也是canvas应用程序的代码。

1.5.2　将canvas添加到html页面中

在html的< body > 部分添加一个< canvas > 标签时，可以参考以下代码。

现在，小结一下正在讨论的内容。< canvas > 标签有3个主要属性。在html中，属性被设在尖括号括起来的html标签中。这3个属性分别如下。

id：id在javascript代码中用来指示特定< canvas > 标签的名字，如canvasone。

width：画布宽度，以像素为单位。width将设为500像素。

height：画布高度，以像素为单位。height将设为300像素。

提示：

html5元素（包括canvas）还有很多属性，如tabindex, title, class, accesskey, dir, draggable, hidden等。

在开始标签< canvas > 和结束标签< /canvas > 中间，可以添加文本，如果浏览器执行html页面不支持canvas时会显示这些文字。以本章的canvas应用程序为例，这里将使用文本“your browser does not support html5 canvas，”（你的浏览器不支持html5 canvas）。实际上此处可以放置任意文字。

在javascript中使用document对象引用canvas元素

接下来用dom引用html中定义的< canvas > 标签。document对象加载后可以引用html页面的任何元素。

这里需要一个canvas对象的引用，这样就能够知道当javascript调用canvas api时其结果在哪里显示。

首先定义一个名为thecanvas的新变量，用来保存canvas对象的引用。

接下来，通过调用document的getelementbyid()函数得到canvasone的引用，canvasone是在html页面中为创建的< canvas > 标签定义的名字。

var thecanvas = document.getelementbyid("canvasone");

1.5.3　检测浏览器是否支持canvas

现在已经得到了html页面上定义的canvas元素的引用，下面就需要检测它是否包含上下文。canvas上下文是指支持canvas的浏览器定义的绘图界面。简单地说，如果上下文不存在，画布也不会存在。有多种方式可以对此进行验证。由于前面已经在html页面中定义了canvas，第一种方式是在调用canvas的getcontext方法之前，检测canvas对象以及getcontext方法是否存在。

实际上，这段代码测试了两件事。第一，它测试thecanvas是否包含false（如果命名的id不存在，document.getelementbyid()将返回此值）。第二，它测试getcontext()函数是否存在。

如果测试失败，return语句将中断程序执行。

另一个方法是创建一个函数，在其中创建一个虚拟画布，以此来检测浏览器是否支持。这个方法是由mark pilgrim在他的html5网站创建并流行起来的。

作者最喜欢的方法是使用modernizr.js库。modernizr是一个易用并且轻量级的库，可以检测各种web技术的支持情况。modernizr创建了一组静态的布尔值，可以检测是否支持canvas。

为了检测是否支持canvas，将canvassupport()函数改成下面这样。

这里将要使用modernizr.js方法，因为它提供了测试web浏览器是否支持canvas的最佳途径。

1.5.4　获得2d上下文

最后需要得到2d上下文的引用才能够操作它。html5 canvas被设计为可以与多个上下文工作，包含一个建议的3d上下文。不过，本书只需得到2d上下文。

1.5.5　drawscreen()函数

现在便可以创建实际的canvas api代码了。在canvas上运行的各种操作都要通过context对象，因为它引用了html页面上的对象。

在后面几章中，本书将深入讲解在html5 canvas中绘制文本、图形和图像等内容，所以现在只需花一点点时间来看drawscreen()函数的代码。

这里说的“屏幕”实际上就是定义的画布绘图区域，而不是整个浏览器窗口。作者之所以将它称之为屏幕，是因为在编写游戏或应用程序时，它就是在操作画布时的显示窗口或屏幕。

首先要做的事情是清空绘图区域。下面的两行代码在屏幕上绘制出一个与画布大小相同的黄色方块。fillstyle()设置了颜色，fillrect()创建了一个矩形，并把它放到屏幕上。

注意，这里调用了context的函数。没有屏幕对象，颜色对象或者其他对象。这就是之前描述的即时模式的示例。

下一章将讨论canvas的文本函数，这里只是简单地浏览将“hello world!”文本放到屏幕上的代码。

首先，使用与设置矩形颜色相同的方法设置文本的颜色。

然后设置字体大小和字号。

接下来设置字体的垂直对齐方式。

最后通过调用context对象的filltext()方法将测试文本显示到屏幕上。这个方法的3个参数分别是是文本字符串、x坐标和y坐标。

下面可以给 “hello world!”文本添加图形。首先，加载一个图像并将它显示出来。第4章将深入讨论图像及其操作，现在仅仅要做的就是显示一个图像到屏幕上。为了将图像显示到画布上，需要创建一个image()对象的实例，并且将image.src属性设为将要加载的图像的名字。

读者也可以将其他画布或者视频当作图像显示出来。本书会在第4章和第6章讨论相关主题。

在显示图像之前，需要等待图像加载完毕。设置image对象的onload函数可以为image load事件创建一个callback()函数。callback()函数将在onload事件发生时被执行。当图像加载完毕，可以调用context.drawimage()并传输3个参数将图像显示到画布上：image对象、x坐标以及y坐标。

最后围绕文本和图像绘制一个方块。为了绘制方块而不填充，可以使用context.strokestyle()方法设置方块边框的颜色，然后调用context.strokerect()方法绘制矩形边框。strokerect()的4个参数分别是：左上角的x坐标和y坐标，以及右下角的x坐标和y坐标。

完整的html5 hello world! 应用程序代码如例1-3所示，结果如图1-3所示。