《HTML5 canvas开发详解(第2版)》——1.6 HTML5 Canvas版“Hello World!”

  1. 云栖社区>
  2. 博客>
  3. 正文

《HTML5 canvas开发详解(第2版)》——1.6 HTML5 Canvas版“Hello World!”

异步社区 2017-05-02 10:01:00 浏览1599
展开阅读全文

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

ba8600f026651c15a8614ee4f38d8d1e1ebf35d5

网友评论

登录后评论
0/500
评论
异步社区
+ 关注