|
|
51CTO旗下网站
|
|
移动端

1.6.3 HTML5 Canvas 版“Hello World”

《H5和WebGL 3D开发实战详解》第1章HTML 5开发基础—进入WebGL 世界的第一道坎,本书是介绍WebGL技术的一本书,但是在进入WebGL世界之前我们需要迈过HTML门槛,因为这是通向WebGL的必经通道。如果连最基本的HTML开发也做不了,那么开发WebGL就是一件遥不可及的事情。本节为大家介绍HTML5 Canvas 版“Hello World”。

作者:吴亚峰/于复兴/索依娜来源:人民邮电出版社|2017-10-31 18:46

1.6.3 HTML5 Canvas 版“Hello World”
 
现在来看开发学习Canvas之路上的第一个案例,即Canvas版的“Hello World”。本小节中将从开发程序的第一步开始,一步步地将程序开发的过程呈现给大家,让没有开发经验的读者对开发程序有一个笼统的概念。
 
在上一小节中讲到JavaScript与Canvas的关系,在开发本部分内容时HTML文件中难免会嵌入JavaScript脚本,所以我们第一步来看一下为了开发Canvas,如何将JavaScript程序中的方法封装起来,留下一个JavaScript程序的入口。
 
1.封装JavaScript代码
 
Canvas应用程序与在浏览器中运行的其他应用有所不同。由于Canvas只在屏幕上特定的区域执行并显示结果,可以说它的功能是独占的,因此不太会受到页面上其他内容的影响,反之亦然。读者如果想在同一个页面上放置多个Canvas应用,那么在定义时必须将对应代码分开。
 
为避免出现这个问题,可以将变量和函数都封装在另一个函数中。JavaScript函数本身就是对象,JavaScript对象既可以有属性,也可以有方法。将一个函数放到另一个函数中,读者可以使第二个函数只在第一个函数的局部作用域中。
 
  1. 1     function eventWindowLoaded(){canvasApp();}  //JavaScript程序在Canvas中的入口函数 
  2. 2     function canvasApp(){                             //入口函数需要调用的函数 
  3. 3           drawScreen();                               //绘制场景函数 
  4. 4           … 
  5. 5           function drawScreen(){…                     //绘制函数,本程序中的重点 
  6. 6     }} 
上述代码讲解了如何将JavaScript代码封装起来,封装好的方法只留下eventWindowLoaded()方法。除此之外,在下一小节中还将绘制不同图形的方法放到外部文件中,在<head>标签部分加载这些文件,待到需要绘制时直接调用相应的方法即可。
 
2.将Canvas添加到HTML页面中
 
在HTML的<body>标签中添加一个<canvas>标签时,可以参考下面的代码。大家都知道在HTML中,属性被设置在相应的标签中,<canvas>标签有3个主要属性:id、width、height,分别代表JavaScript代码中用来指示特定<canvas>标签的名字、画布的宽度与高度。
 
  1. 1     <canvas id="canvasOne" width="500" height="300"> 
  2. 2     若看到这些文字,说明浏览器不支持WebGL!</canvas> 
在开始标签和结束标签中可以添加文本,一旦浏览器执行HTML页面时不支持Canvas,就会显示这些文字。以本章节的Canvas应用程序为例,这里使用的是“若看到这些文字,说明浏览器不支持WebGL”。事实上此处可以随意放置文字。
 
接下来用DOM引用HTML中定义的<canvas>标签。document对象加载后可以引用HTML页面的任何元素。这里需要一个Canvas对象的引用,这样就能够知道当JavaScript调用Canvas API时其结果在哪里显示。
 
  1. 1     var  theCanvas=document.getElementById("canvasOne"); 
首先定义一个名为theCanvas的新变量,用来保存Canvas对象的引用。接下来,通过调用document的getElementById()函数得到canvasOne的引用。canvasOne是在HTML页面中为创建的<canvas>标签定义的名字。
 
3.检测浏览器是否支持Canvas
 
现在已经得到了HTML页面上定义的<canvas>元素的引用,下面就需要检测它是否包含环境。Canvas环境是指支持Canvas的浏览器定义的绘图界面。简单地说,如果环境不存在,那么画布也不会存在。有多种方式可以对此进行验证。
 
这里使用的是modernizr.js库,Modernizr是一个易用并且轻量级的库,可以检测各种Web技术的支持情况。Modernizr创建一组静态的布尔值,可以检测是否支持Canvas。在程序中已经包含了modernizr.js,读者不用再自行下载了。
 
  1. <script src="modernizr.js"></script> 
  2. 2 function canvasSupport(){ 
  3. 3 return Modernizr.canvas;} 
 
上面代码第一行是将外部JS文件导入到HTML文件中,下面的代码用于检测是否支持Canvas,将canvasSupport()函数进行修改,这里将要使用modernizr.js方法,因此它提供了测试Web浏览器是否支持Canvas的最佳途径。
 
4.获得2D环境
 
  1. 1     var context =theCanvas.getContext("2d"); 
最后需要得到2D环境的引用才能操作Canvas。HTML5 Canvas被设计为可以与多个环境工作,包含一个建议的3D环境。不过这里只用到了2D环境。通过getContex()方法取得context,然后在之后的绘制函数中大家便可以用context来设置各个属性了。
 
5.绘制函数
 
现在便可以创建实际的Canvas API代码了。在Canvas上运行的各种操作都要通过context对象,因为它引用了HTML页面上的对象。大家在案例中所看见的“屏幕”就是定义的画布的绘图区域。首先做的事情为清空绘图区域。
 
 
  1. context.fillStyle="#ffffaa"
  2. 2 context.fillRect(0,0,500,300); 
上面的两行代码用于在屏幕上绘制出一个与画布大小相同的黄色方块。fillStyle()设置了颜色,fillRect()创建了一个矩形,并把它放到了屏幕上。在清空完绘图区域以后大家来看一下是如何开发绘制函数drawScreen()的。
 
  1. 1     function drawScreen(){ 
  2. 2                 context.fillStyle="#ffffaa";                //背景 
  3. 3                 context.fillRect(0,0,500,300);              //创建一个矩形 
  4. 4                 context.fillStyle="#000000";                //文字 
  5. 5                 context.font="20px Sans-Serif";             //设置文字的大小和字号 
  6. 6                 context.textBaseline="top";                 //设置文字的垂直对齐方式 
  7. 7                 context.fillText("Hello World!",195,80);    //将测试文本显示到屏幕上 
  8. 8                 var helloWorldImage=new Image();            //添加2D图像 
  9. 9                 helloWorldImage.onload=function(){ 
  10. 10                      context.drawImage(helloWorldImage,155,110);} 
  11. 11                helloWorldImage.src="pic/helloworld.png"
  12. 12                context.strokeStyle="#000000";              //设置边框 
  13. 13                context.strokeRect(5,5,490,290); 
  14. 14                }  
第2~7行设置了背景颜色与形状,之后声明了文字的颜色、大小和字号,并设置了文字的垂直对齐方式。最后将测试文本显示到屏幕上。
 
第8~13行为添加图形的代码,为了将图像显示到画布上需要创建一个Image()对象的实例,并且将Image.src属性设为将要加载的图像的名字。在显示图像之前,需要等待图像加载完毕。设置Image对象的onload函数可以为Imageload时间创建一个回调函数。
 
上面几小节已经将本例中的重点代码详尽地介绍了一遍,所以在这里就不再将全部代码写一遍了,读者可以查阅中的第1章的Sample1_23案例进行学习。下面来看一下第一个Canvas程序的运行效果,如图1-24所示。
 
 

因为这里是在编写书,所以才写出了最终版本。但是读者在第一次开发时肯定会遇到一些问题,所以还会有调试程序的步骤。但是不可能将可能的错误全部罗列到这里,读者在开发中遇到问题时可以用前面提到的浏览器自带调试器或者Firebug进行调试。
 
学完Canvas版本的“Hello World”的开发全过程后,大家来进一步深入地学习一下Canvas提供的一些绘制基本图形的API。这些将会在下一节中展开介绍,看完这些内容后读者就可以开发一些2D的应用了,这里提供的为系统的API,读者只要认真学习都可以掌握。
 
喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


51CTO读书频道活动讨论群:365934973
【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

网管员必读——网络安全(第2版)

本书是在《网管员必读—网络安全》第1版的基础上修改而成的。新版在保留第1版实用内容的基础上增加了大量新的实用内容,同时删除了一些过时...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊