《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 

 canvas id="canvasOne" width="500" height="300" 

Your browser does not support HTML5 Canvas.

 /canvas 

 /div 

 /body 

 /html 

 div 

SpringBoot框架+原生HTML开发的云电子病历系统源码 SaaS模式Java版云HIS系统的子系统云电子病历系统源码，本系统采用前后端分离模式开发和部署，支持电子病历四级。智能化模板、全结构化录入，支持全结构化选择、模板输入、表格式、文本等多种录入方式。
IOT智慧物联网平台源码 后台基于JAVA开发 前端HTML 目前web系统功能已实现： 1、 数据实时采集和远程控制； 2、 报警信息管理和报表导出； 3、 自动控制，触发管理； 4、 历史数据，报表导出功能； 5、 子账户和场景授权管理； 6、 场景信息管理；
基于.Net开发的对比Html效果差异的开源项目 基于.Net 4.5开发的对比Html文件、片段效果差异的项目。两份Html效果不一样的地方会通过颜色、删除线、背景色分别标记出来。
传统html+vue+elementUI开发&nodeJS环境搭建 Shiro提供了完整的企业级会话管理功能，不依赖于底层容器（如Tomcat、WebLogic），不管是J2SE还是J2EE环境都可以使用，提供了会话管理，会话事件监听，会话存储/持久化，容器无关的集群，失效/过期支持，对Web的透明支持，SSO单点登录的支持等特性。 所谓会话，即用户访问应用时保持的连接关系，在多次交互中应用能够识别出当前访问的用户是谁，且可以在多次交互中保存一些数据。如访问一些网站时登录成功后，网站可以记住用户，且在退出之前都可以识别当前用户是谁。
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。