柠檬铺

使用 HTML 5 canvas 绘制精美的图形

—

由

柠檬铺
于

HTML5 是一个新兴标准，它正在以越来越快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性，它们都支持现行的 HTML 4.01 版本规范。它还引入了几个新元素和属性，它们适用许多使用 web 页面的领域 — 音频、视频、图形、数据存储、内容呈现，等等。本文主要关注图形方面的增强：canvas。
新的 HTML5 canvas 是一个原生 HTML 绘图簿，用于 JavaScript 代码，不使用第三方工具。跨所有 web 浏览器的完整 HTML5 支持还没有完成，但在新兴的支持中，canvas 已经可以在几乎所有现代浏览器上良好运行了，但 Windows® Internet Explorer® 除外。幸运的是，一个解决方案已经出现，将 Internet Explorer 也包含进来。
本质上，canvas 元素是一个白板，直到您在它上面 “绘制” 一些可视内容。与拥有各种画笔的艺术家不同，您使用不同的方法在 canvas 上作画。您甚至可以在 canvas 上创建并操作动画，这不是使用画笔和油彩所能够实现的。
本 文探索新的 HTML canvas 元素，从简单地包含一个 canvas 元素到高级 JavaScript 交互（动画的关键）逐步进行演示。学习如何在一个 web 页面上显示 canvas。本文针对 web 设计师和开发人员，尽管 JavaScript 知识不是必须的，但理解该语言的运行方式将有所帮助。但是，HTML 知识是关键所在，尤其是如何创建一个基本 web 页面。
要查看本文展示的示例的实时实例，您需要一个浏览器并能访问 Internet。所有示例都在一个真实网站上提供。
浏览器支持
确 定哪些浏览器支持 HTML5 和一个移动目标达到什么程度。在本文撰写之时，Google Chrome、Apple Safari 和 Mozilla Firefox 都支持大多数新的 HTML5 元素，它们都支持 canvas 元素。Internet Explorer 7 和 8 都不支持 HTML5；Internet Explorer 9 处于测试阶段，支持 HTML5，但还有一些问题。
在此期间，有一个针对不支持 HTML5 的 Internet Explorer 版本的补丁可用。这个补丁的前提是创建使用 JavaScript 代码的元素。例如，可以使用代码段 document.createElement('canvas') 创建一个可识别的 Canvas 标记；但是，这并不意味着有东西经过元素本身。一个流行的解决方法是包含一个完整的基于 canvas 的 JavaScript 库，这个库由 Google 提供，称为 ExplorerCanvas— 或简称 excanvas。下载并将其作为一个外部文件引用，如下所示。

双击代码全选

1

2

3

<!--[if IE]>  

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

<![endif]-->

 

通过包含 excanvas，您向 Internet  Explorer 提供 canvas 及其大多数方法。
创建您的第一个 canvas
由于 canvas 只是一个 HTML 标记，因此它的显示方式只是包含在标记中。第一个示例（如 图 1 所示）显示一个最简单的 canvas。它之所以可见，是因为它通过 style 属性获得了一个颜色方案，通过 width 和 height 属性获得了其大小。

图 1. 一个空白 canvas

这个页面的代码简短明了，如 清单 1 所示。

清单 1. 包含一个 canvas 的 web 页面的 HTML

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>  

<html>  

<head>  

<title>HTML5 Canvas Demo</title>  

<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

</head>  

<body>  

<div style="margin-left:30px;">  

<canvas id="myCanvasTag" width="400" height="400"

    style="background-color:blue;border: 10px yellow solid"></canvas>  

<br /><br />  

<a href="index.html">back</a>  

</div>  

</body>  

</html>

 

这个 canvas 的宽度和高度均为 400 像素，边框为黄色，背景为蓝色。canvas 上没有任何实际绘图；绘图通过属于 canvas 的 JavaScript 方法完成。
canvas 方法
表 1 列示了几个附加到 canvas 上下文的方法。

表 1. canvas 方法

构建更复杂的 canvas 应用程序
本小节将展示一系列示例，每个示例的功能都比前一个示例略有增加。
更深刻的视觉体验
首先，将一组矩形放置到 canvas 上。记住，矩形是拥有 4 条直边和 4 个直角的图形，正方形是矩形的变体。图 2 显示 canvas 上有一系列矩形，每个矩形都比前一个略小。注意，每个矩形的颜色都不同，使其更清晰明确。

图 2. 使用一些矩形填充的 canvas

清单 2 显示了用于创建图 2 中的 canvas 的代码。每个矩形都由两行代码创建：首先，fillStyle 方法使用颜色定义的红、绿、蓝（RGB）格式定义颜色（fillStyle='rgb(255,0,0)）。然后，fillRect 方法（fillRect(50,50,300,300)）定义大小。前两个值设置起始坐标，后两个值设置结束坐标。

清单 2. 使用 JavaScript 代码创建上下文并使用各种方法

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<!DOCTYPE html>  

<html>  

<head>  

<title>HTML5 Canvas Demo</title>  

<!--[if IE]>  

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

<![endif]-->  

<script>  

 window.onload=function() {  

   var mycanvas=document.getElementById("myCanvasTag");  

   var mycontext=mycanvas.getContext('2d');  

   mycontext.fillStyle='rgb(0,0,255)';   

   mycontext.fillRect(0,0,400,400);     

   mycontext.fillStyle='rgb(255,0,0)';    

   mycontext.fillRect(50,50,300,300);      

   mycontext.fillStyle='rgb(0,255,0)';    

   mycontext.fillRect(100,100,200,200);  

   mycontext.fillStyle='rgb(100,100,100)';    

   mycontext.fillRect(125,175,150,25);  

 }  

</script>  

</head>  

<body>  

<div style="margin-left:30px;">  

<canvas id="myCanvasTag" width="400" height="400" style="border: 10px yellow solid">  

</canvas>  

<br /><br />  

<a href="index.html">back</a>  

</div>  

</body>  

</html>

 

要在 canvas 上绘图，通过将 getContext('2d') 应用到 canvas 元素访问提供方法的 API。通过这个 document.getElementById 方法，canvas 元素被设置为一个 JavaScript 变量：