基于 HTML5 的 Dojo Widget 开发 （2）
|
- UID
- 1066743
|
基于 HTML5 的 Dojo Widget 开发 （2）
新一代 Web 标准—— HTML5HTML5 是新一代的 HTML 标准，它里面包含了很多 HTML4 中没有的新标签和应用程序接口，如 audio 标签、video 标签、矢量绘图、Web 套接字、离线数据存储等。这些新特性可以使 Web 页面具有更丰富的功能和更好的用户体验，其中的很多都可以用在网页控件设计上，从而使得网页上的内容更加丰富。在 HTML5 众多的功能中，有一个功能非常重要，它不仅是一项被众多网页设计人员期待已久的功能，而且为网页的功能和外观设计留下了巨大的空间，它就是 HTML5 中的矢量绘图。现在，不仅不少的业内人士将 HTML5 的矢量绘图视作 Flash 的挑战者，甚至连 Flash 的支持厂商 Adobe 都推出了基于 HTML5 矢量绘图的动画制作工具。本文后面将会介绍借助 HTML5 的矢量绘图技术实现 Dojo Widget。在此之前，为了帮助读者能够更好的理解本文的内容，这里先对 HTML 中的矢量绘图做一些简要的说明。HTML5 的矢量绘图的功能由 Canvas 标签和各种绘图 API 构成。在 JavaScript 的脚本中，通过 Canvas 节点可以获得绘图上下文，通过它调用 API 就可以绘制各种矢量图，如下所示。
清单 1. 利用 HTML5 Canvas 绘制的矩形和三角形1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(205,125);
ctx.lineTo(125,205);
ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas1" height="600" width="600">
</canvas>
</body>
</html>
|
图 1. HTML5 的 Canvas 绘制的矩形和三角形 在上面的例子中，我们在一个 HTML 的文档中加入了一个 Canvas 标签，利用基于 JavaScript 的 API 来获得绘图上下文（Context），并在上面绘制了我们所要的图形。除了绘制 2D 图形，HTML5 还支持 3D 矢量绘图，它与 2D 的使用方式类似，此处不再详述。
值得注意的是，HTML5 还是一个发展的标准，至今并没有被所有主流浏览器全面支持。但是，即使是曾经是对 HTML5 支持较少的 IE 浏览器也会在新版本 IE9 中支持 Canvas 绘图等 HTML5 关键标签技术。所以相信在不久的将来，HTML5 的普及就会实现。 |
|
|
|
|
|
