本节书摘来自异步社区《HTML5 Canvas开发详解》一书中的第1章，第1.5节,作者： 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。
1.5 HTML5 Canvas版“Hello World！”
如前所述，将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是否加载完毕的最终代码。
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded (){
canvasApp();
}
另外，也可以用许多其他方式为load事件设置事件监听器。
window.onload = function()
{
canvasApp();
}
或者使用如下代码。
window.onload = canvasApp();
本书使用第一种方法。
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应用程序的代码。
function canvasApp(){
drawScreen();
...
function drawScreen(){
...
}
}
1.5.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.5.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('testcanvas').getContext;
}
function canvasApp(){
if (!canvasSupport){
return;
}
}
作者最喜欢的方法是使用modernizr.js库。Modernizr是一个易用并且轻量级的库，可以检测各种Web技术的支持情况。Modernizr创建了一组静态的布尔值，可以检测是否支持Canvas。
<script src="modernizr-1.6.min.js"></script>
为了检测是否支持Canvas，将canvasSupport()函数改成下面这样。
function canvasSupport (){
return Modernizr.canvas;
}
这里将要使用modernizr.js方法，因为它提供了测试Web浏览器是否支持Canvas的最佳途径。
1.5.4 获得2D上下文
最后需要得到2D上下文的引用才能够操作它。HTML5 Canvas被设计为可以与多个上下文工作，包含一个建议的3D上下文。不过，本书只需得到2D上下文。
var context = theCanvas.getContext("2d");
1.5.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";
接下来设置字体的垂直对齐方式。
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事件创建一个callback()函数。callback()函数将在onload事件发生时被执行。当图像加载完毕，可以调用context.drawImage()并传输3个参数将图像显示到画布上：Image对象、x坐标以及y坐标。
var helloWorldImage = new Image();
helloWorldImage.src = "helloworld.gif";
helloWorldImage.onload = function (){
context.drawImage(helloWorldImage, 160, 130);
}
最后围绕文本和图像绘制一个方块。为了绘制方块而不填充，可以使用context.StrokeStyle()方法设置方块边框的颜色，然后调用context.strokeRect()方法绘制矩形边框。strokeRect()的4个参数分别是：左上角的x坐标和y坐标，以及右下角的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-1.6.min.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";
context.textBaseline = "top";
context.fillText ("Hello World!", 195, 80 );
//图像
var helloWorldImage = new Image();
helloWorldImage.src = "helloworld.gif";
helloWorldImage.onload = function (){
context.drawImage(helloWorldImage, 160, 130);
}
//边框
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>
