Ch2 开始前的准备

添加一个 Canvas

在HTML中添加Canvas非常简单,只需要在HTML的<body>部分,添加上<canvas>标签就可以了!可以参考下面的代码。

  1. <!doctype html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>基础的HTML5页面</title>
  6. </head>
  7. <body>
  8. <canvas id="canvas">
  9. 你的浏览器居然不支持Canvas?!赶快换一个吧!!
  10. </canvas>
  11. </body>
  12. </html>

演示 2-1

由于结果页面是一个完完全全的空白页面,所以这里我就不贴图了。大家可能会很好奇,为什么会是一个空白呢?(废话,我还没来得及画画呢!)Canvas的本意是画布,也就是画布的意思(废话…),画布在HTML5中是透明的,是不可见的。

<canvas>标签中的那段文本是什么意思呢?那是一旦浏览器执行HTML页面时不支持Canvas,就会显示这段文字,换言之,只要你的浏览器支持Canvas,页面上就不会显示这个文本。

<canvas>中的id是什么意思?id是标签的属性之一,在JavaScript代码中用来指定特定的<canvas>的名字,就像一个人的身份证号码一样,是唯一的。

为了更清楚的展示Canvas,以及方便之后的演示,我稍微修改了一下代码,之后的绘图都会在这个Canvas上绘制。

  1. <!doctype html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>基础的Canvas</title>
  6. </head>
  7. <body>
  8. <div id="canvas-warp">
  9. <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;" width="800" height="600">
  10. 你的浏览器居然不支持Canvas?!赶快换一个吧!!
  11. </canvas>
  12. </div>
  13. </body>
  14. </html>

演示 2-2

运行结果: 基础的Canvas页面

对以上代码有几点说明:

  1. 添加了<div>标签,将<canvas>包裹其中,个人习惯,暂时并没有什么卵用。
  2. <canvas>标签指定了width和height属性,规定了它的宽和高。
  3. <canvas>标签添加了一个内联样式,使其变为块级元素并居中显示。

关于CSS的内容这里不做说明,毕竟这不是本课程的主角,若做扩展会花费大量篇幅。考虑到HTML、CSS是基础,建议大家花点时间自己学,推荐慕课网的HTML+CSS课程

引用 Canvas 元素

文档对象模型(DOM)

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,计有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

文档对象模型代表了在 HTML 页面上的所有对象。它是语言中立且平台中立的。它允许页面的内容和样式被 Web 浏览器渲染之后再次更新。用户可以通过 JavaScript 访问 DOM。

在开始使用<canvas>前,首先需要了解两个特定的 DOM 对象:window 和 document。

  • window 对象是 DOM 的最高一级,需要对这个对象进行检测来确保开始使用 Canvas 应用程序之前,已经加载了所有的资源和代码。
  • document 对象包含所有在 HTML 页面上的 HTML 标签。需要对这个对象进行检索来找 出用 JavaScript 操纵<canvas>的实例。

JavaScript 放置位置

使用 JavaScript 为 Canvas 编程会产生一个问题:在创建的页面中,从哪里启动 JavaScript程序?

把 JavaScript 放进 HTML 页面的<head>标签中是个不错的主意,这样做的好处是很容易找到它,也是上一章我们介绍<head>中所提到的。但是,把 JavaScript 程序放在这里就意味着整个 HTML 页面要加载完 JavaScrpit 才能配合 HTML 运行,这段 JavaScript 代码也会在整个页面加载前就开始执行了。结果就是,运行 JavaScript 程序之前必须检查 HTML 页面是否已经加载完毕。

最近有一个趋势是将 JavaScript 放在 HTML 文档结尾处的</body>标签之前,这样就可以确保在 JavaScript 运行时整个页面已经加载完毕。然而,由于在运行<canvas>程序前需要使用 JavaScript 测试页面是否加载,因此最好还是将 JavaScript 放在<head>中。

不过本人不走寻常路(笑),所以之后的案例,还是按照自己的编码风格将JavaScript代码放在了<body>的尾部。当然,如果JavaScript代码有些多,就推荐使用加载外部 .js 文件的方式。代码大致如下:

  1. <script type="text/javascript" src="bootstarp.js"></script>

在实际项目开发中,都是将HTML、CSS、JS三者完全分离的。不过用于案例演示代码略少,所以大多没有使用加载外部 .js 文件的方式。

获取canvas对象

获取canvas对象其实就是一句话的事情。

  1. var canvas = document.getElementById("canvas");

var用于变量定义,由于JS是弱类型语言,所以定义啥变量都用var。跟在var之后的canvas是变量。使用document对象的getElementById()的方法,通过id获取对象。之前我们为<canvas>标签赋予了一个id,名叫canvas,所以该句话最后一个canvas是指<canvas>的id——canvas。(是不是有点绕,需要自己多读几遍捋清楚。)

获得画笔(2D环境)

画画首先需要啥?画笔啊。获取canvas画笔也是一句话的事情,就是直接使用刚才获得的canvas对象,调用它的getContext("2d")方法,即可。

  1. var context = canvas.getContext("2d");

这里的context便是画笔了。

在其他教程中都是使用2D环境这个专有术语,我觉得画笔更加形象。灵感引自Java中Graphics类的g画笔,原理与之相同。

总结

准备工作只有三步:

  1. 布置画布:通过添加<canvas>标签,添加canvas元素
  2. 获取画布:通过<canvas>标签的id,获得canvas对象
  3. 获得画笔:通过canvas对象的getContext("2d")方法,获得2D环境

对应的代码也就是三句话:

  1. <canvas id="canvas"></canvas>
  2. var canvas = document.getElementById("canvas");
  3. var context = canvas.getContext("2d");

完整代码如下。

  1. <!doctype html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>基础的Canvas</title>
  6. </head>
  7. <body>
  8. <div id="canvas-warp">
  9. <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;" width="800" height="600">
  10. 你的浏览器居然不支持Canvas?!赶快换一个吧!!
  11. </canvas>
  12. </div>
  13. <script>
  14. window.onload = function(){
  15. var canvas = document.getElementById("canvas");
  16. var context = canvas.getContext("2d");
  17. }
  18. </script>
  19. </body>
  20. </html>

演示 2-3

注意几点:

  1. JavaScript代码需要包裹在<script>标签中。
  2. window.onload = function(){}加载页面后就要立即执行,表示网页加载完执行后面的那个function函数体的内容。

至此,画布和画笔已经准备完毕,接下来就让我们使用画笔(context对象)绘制出高逼格的图像吧!觉醒吧!艺术家之魂!