1.11 动画版本的Hello World
“Hello World”和“猜字母”本身都是不错的示例，但是它们都没能回答出“为什么”——究竟为什么要使用HTML5 Canvas？自创立以来，静态的图像和文字就是HTML的领域，那么画布的不同之处在哪里呢？要回答这个问题，需要创建第二个“Hello World”示例。这个示例将介绍画布与HTML上的其他显示方式的最大不同之处：动画。在这个示例中，将为“Hello World”添加一个简单的在屏幕上“淡入淡出”的效果。虽然很简单，但却是进入HTML5 Canvas更高境界的第一步。读者可以在图1-5中看到这个示例的最终效果。
1.11.1 一些必要的属性
为了完成这个程序，还需要设置一些必要的属性。
alpha属性用于保存文字的透明度，在“淡入淡出”文字的时候通过context.globalAlpha方法进行设置。当设置为0时，文字将完全不可见。本书将在后面的章节中做更详细的解释。
fadeIn属性用于在程序标识文字是淡入还是淡出。
text属性保存用于显示的字符串。
helloWorldImage属性保存显示在动画文字后面的背景图片。
var alpha = 0;
var fadeIn = true;
var text = "Hello World";
var helloWorldImage = new Image();
helloWorldImage.src = "html5bg.jpg";
1.11.2 动画循环
为了使画布上的每一样东西都动起来，还需要一个“动画循环”。“动画循环”是一个函数，每隔一定时间就会被一遍又一遍地重复调用它。这个函数被用于清除画布的内容，然后在画布上重新绘制更新后的图像、文字视频和其他绘画对象。
创建动画间隔最简单的方法是使用一个setTimeout()循环。要做到这一点，首先要创建一个名为gameLoop()的函数（也可以叫任何喜欢的名字），在这个函数中使用window.setTimeout()方法在指定的时间周期后调用其自身。对于应用程序，时间间隔是20ms。此函数首先对自己进行重置，准备好20ms后再次调用，然后调用drawScreen()函数。
通过这种方式，drawScreen()函数每隔 20ms 就会被调用一次。将所有的绘制代码放在drawScreen()函数中。这种方式与使用setInterval()函数的效果相同，只不过这种方式每次会清除自己，不会永远运行下去，这样对性能更好。
function gameLoop() {
window.setTimeout(gameLoop, 20);
drawScreen()
}
gameLoop();
requestAnimationFrame()
创建一个动画循环的最好办法是采用全新的window.requestAnimationFrame()方法。
这种新方法使用一个变化的计时器，可以让 JavaScript 程序获知浏览器为渲染一个新的动画帧做好准备的确切时间。代码如下：
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
(function animloop(){
requestAnimFrame(animloop);
render();
})();
然而，这个方法还正在变动，而且不是所有的浏览器都支持。因此，本书将在所有程序中使用window.setTimeout()方法。
1.11.3 使用globalAlpha属性设置alpha透明度
之所以选择使用context.globalAlpha属性设置动画是因为它非常容易解释，非常适合在Canvas上制作一个动画效果的展示。context.globalAlpha属性用于在画布上设置透明度。这个属性可以接受0～1之间的数字，表示设置给属性之后绘制对象的不透明度的百分比。例如：
context.globalAlpha = 0;
上面的代码将会设置后续渲染的对象的不透明度为0%，即完全透明。
context.globalAlpha = 1;
上面的代码将会设置后续渲染的对象为100%不透明，即透明度是0%。
context.globalAlpha = .5;
上面的代码将会设置后续渲染的对象为50%不透明，即50%透明。
通过在循环中修改这些值，就可以在画布上绘制出淡入淡出的效果。
提示
context.globalAlpha属性会影响后续绘制的所有对象。因此，如果不希望在绘制对象时使用上一个对象绘制时的context.globalAlpha属性值，则需要在将对象绘制在画布上之前重置该属性的值。
1.11.4 清除并显示背景
在drawScreen()函数每隔20ms被调用一次，用户需要在其中重新绘制画布以更新动画。
由于程序中是通过globalAlpha属性来改变绘制对象的透明度，因此必须确保在绘制操作开始前重置该属性。将context.globalAlpha属性设置为1，然后绘制背景（一个黑色矩形）。接下来，将context.globalAlpha设置为.25，然后绘制已经加载的helloWorldImage图片。图片将按照25%不透明度显示，黑色背景可以透过图片显示出来。
function drawScreen() {
//背景
context.globalAlpha = 1;
context.fillStyle = "#000000";
context.fillRect(0, 0, 640, 480);
//图片
context.globalAlpha = .25;
context.drawImage(helloWorldImage, 0, 0);
1.11.5 更新globalAlpha属性
由于本示例中的动画是由画布上文字的淡入和淡出组成的，因此在drawScreen()函数中的主要操作是根据fadeIn属性更新alpha的值。如果文字正在淡入（fadeIn为true），那么将alpha的值每次增加.01。如果alpha的值大于1（能够接受的最大值），那么将它重置为1，然后将fadeIn设置为false（这意味文字开始淡出）。如果fadeIn为false，那么进行相反的操作，当alpha属性为0时将fadeIn设置为true。在设置alpha属性的值之后，通过设置context.globalAlpha属性，将它应用到画布上。
if (fadeIn) {
alpha += .01;
if (alpha >= 1) {
alpha = 1;
fadeIn = false;
}
} else {
alpha -= .01;
if (alpha < 0) {
alpha = 0;
fadeIn = true;
}
}
context.globalAlpha = alpha;
1.11.6 绘制文字
最后，在画布上绘制文字，drawScreen()函数就完成了。20ms后，drawScreen()函数会再次调用，alpha的值会被更新，文字也会被重新绘制。
```javascript
context.font = "72px Sans-Serif";
context.textBaseline = "top";
context.fillStyle = "#FFFFFF";
context.fillText (text, 150,200);
}
```javascript
本示例的完整代码如下。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH1EX5 : Hello World Animated </title>
<script src="modernizr.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded () {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp () {
if (!canvasSupport()) {
return;
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
function drawScreen() {
//背景
context.globalAlpha = 1;
context.fillStyle = "#000000";
context.fillRect(0, 0, 640, 480);
//图像
context.globalAlpha = .25;
context.drawImage(helloWorldImage, 0, 0);
if (fadeIn) {
alpha += .01;
if (alpha >= 1) {
alpha = 1;
fadeIn = false;
}
} else {
alpha -= .01;
if (alpha < 0) {
alpha = 0;
fadeIn = true;
}
}
//text
context.font = "72px Sans-Serif";
context.textBaseline = "top";
context.globalAlpha = alpha;
context.fillStyle = "#FFFFFF";
context.fillText (text, 150,200);
}
var text = "Hello World";
var alpha = 0;
var fadeIn = true;
//image
var helloWorldImage = new Image();
helloWorldImage.src = "html5bg.jpg";
function gameLoop() {
window.setTimeout(gameLoop, 20);
drawScreen()
}
gameLoop();
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="640" height="480">
Your browser does not support HTML 5 Canvas.
</canvas>
</div>
</body>
</html>
1.11.7 HTML5 Canvas实现无障碍访问：子dom
目前，用于实现画布无障碍访问的方法被称为“后备DOM概念”或者“子dom”（其中包括将文字直接加入的< canvas ></ canvas >标签中）。
众所周知，由于HTML5 Canvas是一个采用即时模式进行位图映射的屏幕区域，因此并不适合实现无障碍访问。在Canvas中，没有任何固定的DOM元素或显示列表可以帮助无障碍设备（比如屏幕阅读器）搜索画布上绘制的文字、图像以及它们的属性。为了使得Canvas可以无障碍访问，建议使用一种被称为“后备DOM”的概念，有时也被称为“子dom”。利用这种方法，开发者创建一个Dom元素使其匹配Canvas上的每一个元素，然后将其放入子dom中。
在创建的第一个“Hello World”的Canvas示例中（参见CH1EX3.html），文本“Hello World!”显示在一张背景图上（见图 1-3）。如果为这个示例创建一个子dom，可以这样做：
<canvas id="canvasOne" width="500" height="300">
<div>A yellow background with an image and text on top:
<ol>
<li>The text says "Hello World"</li>
<li>The image is of the planet earth.</li>
</ol>
</div>
</canvas>
制作一个可以无障碍访问的标题替换下面的代码：
<title>Ch1Ex6: Canvas Sub Dom Example </title>
将它改为：
<title>Chapter 1 Example 6 Canvas Sub Dom Example </title>
为了测试这个页面，还需要一个屏幕阅读器（或者一个屏幕阅读器的模拟器）。Fangs是一个Firefox的屏幕模拟器插件，它可以在打开网页时将屏幕阅读器能够读出的文字列出来，这样就可以帮助用户进行无障碍的调试了。安装这个插件后，在页面上点击鼠标右键，选择“View Fangs”选项就可以看到屏幕阅读器是如何查看网页的了。
对于刚刚创建的Canvas页面，Fangs会显示，页面会按照下面的文字进行朗读：“Chapter one Example six Canvas Sub Dom Example dash Internet Explorer A yellow background with an image and text on top List of two items one The text says quote Hello World quote two The image is of the planet earth.List end.”
对于Google Chrome浏览器，可以选择Google Chrome的扩展程序Chrome Vox。这个工具会尝试朗读页面上所有的内容。
完整示例请参考本书代码中的CH1EX6.html。
点击测试的提案
如果尝试在画布上制作更复杂的效果，而不仅仅是一个简单的动画，那么就会很快发现子dom是一个相当笨拙的办法。为什么呢？因为将后备元素与Canvas的交互效果相关联并不一个轻松的任务。对于屏幕阅读器来说，它需要知道画布上每个元素的确切位置才能进行解读，并且这个过程相当复杂。
为了解决这个问题，需要一些方法将子dom元素与画布上的位图区域相关联。新的W3C Canvas点击测试的提案中对于为什么将此类功能添加到Canvas规范做了以下阐述：
在目前的HTML5规范中，开发者被建议在canvas元素中创建一个后备DOM，使屏幕阅读器能够与画布的用户界面交互。由于这些元素的大小和位置都没有定义，因此会导致无障碍工具出现一些问题。例如，这些工具应该如何汇报这些元素的大小和位置？
因为画布元素需要经常响应用户的输入操作，所以使用同一种机制处理点击测试和无障碍访问的问题似乎是一个明智的决定。
（1）他们在暗示一种什么机制？
这个想法似乎是在创建两个新的方法，setElementPath（element）和clearElementPath（element）。这将允许程序员定义（和删除）的画布上的一个区域，该区域可以作为点击区域使用，并与画布的后备DOM元素关联。这样看来，必须为setElementPath()方法提供一个可访问的后备DOM元素，才能将之与点击测试相关联。当一个点击被检测到，就会触发一个事件，整个机制就是这样运作的。
（2）这对开发者意味着什么？
对于相对固定的用户界面，这会使事情变得更容易。有人曾经有多少次，想为游戏界面上的按钮点击创建一个简单的方法？但是最终，不得不使用与处理游戏精灵交互时用到的点击检测流程相同的方法（笔者每一次都不得不这么做）。然而，对于移动游戏中的精灵来说，这个方法没什么帮助。用户不得不在每次精灵移动时调用setElementPath()方法，并更新后备DOM元素的坐标。对于一个游戏来说，这意味着3倍的开销。显然，此时无障碍化的优先级不能可能排在第一位。