《HTML5 Canvas开发详解》——1.5　HTML5 Canvas版“Hello World！”-阿里云开发者社区

本节书摘来自异步社区《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>

02ffc59c1dd617ea8f15e5f8aee7b4987ac4c804

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

1.5　HTML5 Canvas版“Hello World！”

热门文章

最新文章

相关课程

相关电子书

相关实验场景

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

1.5 HTML5 Canvas版“Hello World！”

热门文章

最新文章

相关课程

相关电子书

相关实验场景

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

1.5　HTML5 Canvas版“Hello World！”