《HTML5 canvas开发详解（第2版）》——1.6　HTML5 Canvas版“Hello World！”

本节书摘来自异步社区《HTML5 canvas开发详解（第2版）》一书中的第1章，第1.6节,作者： 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.6　HTML5 Canvas版“Hello World！”

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

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

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

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

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

（1）load事件。

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

（2）eventWindowLoaded()事件处理器函数。

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

（3）useCapture：true或false。

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

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

window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded (){
　 canvasApp();
}

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

window.onload = function()
　 {
　　　 canvasApp();
　 }

或者使用如下代码。

window.onload = canvasApp;

本书使用第一种方法。

1.6.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应用程序的代码。

function canvasApp(){
　 drawScreen();
　 ...
　 function drawScreen(){

　　　　...
　 }
}

1.6.2　将Canvas添加到HTML页面中
在HTML的< body >部分添加一个< canvas >标签时，可以参考以下代码。

<canvas id="canvasOne" width="500" height="300">
 Your browser does not support HTML5 Canvas.
</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.6.3　检测浏览器是否支持Canvas
现在已经得到了HTML页面上定义的canvas元素的引用，下面就需要检测它是否包含环境。Canvas环境是指支持Canvas的浏览器定义的绘图界面。简单地说，如果环境不存在，画布也不会存在。有多种方式可以对此进行验证。前面已经在HTML页面中定义了Canvas。第一种方式是在调用Canvas的getContext方法之前，检测Canvas对象以及getContext方法是否存在。

if (!theCanvas || !theCanvas.getContext){
　 return;
}

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

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

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

function canvasSupport (){
　　return !!document.createElement('canvas').getContext;
}
function canvasApp(){ 
　 if (!canvasSupport){
　　　return;
　}
}

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

为了在HTML页面中包含modernizr.js。

<script src="modernizr.js"></script>

为了检测是否支持Canvas，将canvasSupport()函数进行修改，如下所示。

function canvasSupport (){
　 return Modernizr.canvas;
}

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

1.6.4　获得2D环境
最后需要得到2D环境的引用才能够操作它。HTML5 Canvas被设计为可以与多个环境工作，包含一个建议的3D环境。不过，本书只需得到2D环境。

var context = theCanvas.getContext("2d");

1.6.5　drawScreen()函数
现在便可以创建实际的Canvas API代码了。在Canvas上运行的各种操作都要通过context对象，因为它引用了HTML页面上的对象。

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

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

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

context.fillStyle = "#ffffaa";
context.fillRect(0, 0, 500, 300);

提示
注意，这里调用了context的函数。没有屏幕对象、颜色对象或者其他对象。这就是之前描述的即时模式的示例。
下一章将讨论Canvas的文本函数，这里只是简单地浏览将“Hello World!”文本放到屏幕上的代码。

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

context.fillStyle = "#000000";

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

context.font = "20px Sans-Serif";
接下来，设置字体的垂直对齐方式。

context.textBaseline = "top";

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

context.fillText ("Hello World!", 195, 80);

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

提示
读者也可以将其他画布或者视频当作图像显示出来。本书会在第4章和第6章讨论相关主题。
在显示图像之前，需要等待图像加载完毕。设置Image对象的onload函数可以为Image load事件创建一个匿名的回调函数。这个匿名的回调函数将在onload事件发生时被执行。当图像加载完毕，调用context.drawImage()并传输3个参数将图像显示到画布上：Image对象、x坐标以及y坐标。

var helloWorldImage = new Image(); 
helloWorldImage.onload = function () { 
　 context.drawImage(helloWorldImage, 160, 130); 
}
helloWorldImage.src = "helloworld.gif";

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

context.strokeStyle = "#000000";
context.strokeRect(5, 5, 490, 290);

完整的HTML5“Hello World!”应用程序代码如例1-3所示，结果如图1-3所示。

例1-3　HTML5 Canvas下的“Hello World！”

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH1EX3: Your First Canvas Application </title>

<script src="modernizr.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);

var Debugger = function (){ };
Debugger.log = function (message){
　 try {
　　　console.log(message);
　 } catch (exception){
　　　return;
　 }
}

function eventWindowLoaded (){
　 canvasApp();
}

function canvasSupport (){
　 return Modernizr.canvas;
}

function canvasApp (){

　　　　if (!canvasSupport()){ 
　　　　　 return;
　　　　}

　　　var theCanvas = document.getElementById("canvasOne");
　　　var context = theCanvas.getContext("2d");

　　　Debugger.log("Drawing Canvas");

　　　　function drawScreen(){
　　　　 //背景
　　　　 context.fillStyle = "#ffffaa";
　　　　 context.fillRect(0, 0, 500, 300);

　　　　 //文字
　　　　 context.fillStyle = "#000000";
　　　　 context.font = "20px Sans-Serif";　　　　 
　　　　 context.textBaseline = "top";
　　　　 context.fillText ("Hello World!", 195, 80 );

　　　　 //图像
　　　　 var helloWorldImage = new Image(); 
　　　　 helloWorldImage.onload = function () { 
　　　　　　　context.drawImage(helloWorldImage, 155, 110); 
　　　　　 } 
　　　　　 helloWorldImage.src = "helloworld.gif"; 

　　　　 //边框
　　　　 context.strokeStyle = "#000000";
　　　　 context.strokeRect(5, 5, 490, 290);

　　　}

　　　drawScreen();

}

</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
<div style="text-align: center">