使用 HTML5 canvas 绘制精美的图形（1）
|
- UID
- 1066743
|
使用 HTML5 canvas 绘制精美的图形（1）
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。下载并将其作为一个外部文件引用，如下所示。（参见 中的链接，了解更多 excanvas 信息。）
1
2
3
| <!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
|
通过包含 excanvas，您向 Internet Explorer 提供 canvas 及其大多数方法。
创建您的第一个 canvas由于 canvas 只是一个 HTML 标记，因此它的显示方式只是包含在标记中。第一个示例（如 所示）显示一个最简单的 canvas。它之所以可见，是因为它通过 style 属性获得了一个颜色方案，通过 width 和 height 属性获得了其大小。
图 1. 一个空白 canvas 这个页面的代码简短明了，如 所示。
清单 1. 包含一个 canvas 的 web 页面的 HTML1
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 方法 列示了几个附加到 canvas 上下文的方法。
表 1. canvas 方法方法用途getContext(contextId)公开在 canvas 上绘图需要的 API。惟一（当前）可用的 contextID 是 2d。 height设置 canvas 的高度。默认值是 150 像素。width设置 canvas 的宽度。默认值是 300 像素。createLinearGradient(x1,y1,x2,y2)创建一个线性渐变。起始坐标为 x1,y1，结束坐标为 x2,y2。 createRadialGradient(x1,y1,r1,x2,y2,r2)创建一个放射状渐变。圆圈的起始坐标是 x1,y1，半径为 r1。圆圈的结束坐标为 x2,y2，半径为 r2。 addColorStop(offset, color)向一个渐变添加一个颜色停止。颜色停止（color stop） 是渐变中颜色更改发生的位置。offset 必须介于 0 到 1 之间。fillStyle设置用于填充一个区域的颜色 — 例如，fillStyle='rgb(255,0,0)'. strokeStyle设置用于绘制一根直线的颜色 — 例如，fillStyle='rgb(255,0,0)'. fillRect(x,y,w,h)填充一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形。 strokeRect(x,y,w,h)绘制一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形的轮廓。 moveTo(x,y)将绘图位置移动到坐标 x,y。lineTo(x,y)从绘图方法结束的最后位置到 x,y 绘制一条直线。 |
|
|
|
|
|
