<svg version="1.1" xmlns="http://www.w3.org/2000/svg" > <defs> <linearGradient x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%"/> <stop offset="100%"/> </linearGradient> </defs> <rect x="12" y="12"> <animate attributeName="width" begin="click" to="300" dur="5s" fill="freeze"/> <animate attributeName="width" to="100" begin="a1.end" dur="5s" fill="freeze"/> <set attributeName="fill" to="yellow" begin="a1.begin + 3s" dur="4s"/> </rect> <g transform="translate(25,120)" fill="red" font-size="25"> <text>IBM</text> </g> <script language="JavaScript"> <![CDATA[ function showBTT() { var g1=document.getElementById("g1"); var txts=g1.getElementsByTagName("text"); for(var i=txts.length-1;i>=0;i--){ g1.removeChild(txts.item(i)); } var text = document.createElementNS("http://www.w3.org/2000/svg","text"); text.appendChild(document.createTextNode("BTT")); g1.appendChild(text); } ]]> </script> </svg>
在本小节中，我们介绍了 SVG 的基本概念、语言规范、动态特性等内容。虽然在现有的 IE 系浏览器上，它不能被支持，但在其它的非 IE 系的浏览器上能够在一定程度上被支持，如在 Firefox 上绝大部分静态特性能被支持。VML 是 IE 上的支持最好的矢量绘图语言，所以在实际应用中，SVG 可以与 VML 互为补充，同样的矢量图形内容在 IE 中用 VML 来进行渲染，在其它的浏览器中用 SVG 来进行渲染。后面提到的矢量绘图框架 Raphael 就是基于这样的原理实现的。
HTML5 Canvas前面介绍了两个矢量绘图语言 VML 和 SVG，它们两者都是基于 XML 描述，能良好的支持矢量图形在 Web 页面上的绘制，并且提供一定的动态性，所以从语言和功能的设计角度来讲，两者都是很优秀的。然而，VML 和 SVG 所面临的最大的问题是浏览器的支持，VML 是微软主推的矢量绘图语言，IE 对其支持的很完备，但其它的浏览器并不支持它；SVG 虽然是 W3C 的标准，但还处在发展的过程中，且缺少 IE 这一用户量最大的浏览器的支持，严重的制约了它的发展。所以，越来越多的 Web 开发者将目光投向了 HTML5，希望能从这一未来的 HTML 标准中找到更为统一的方法。所幸的是，HTML5 中的 canvas 为这一问题提供了答案。HTML5 是一个新的 HTML 标准，它里面包含了很多现已被广泛支持的 HTML4 中没有的新特性，包括新的块级元素，audio、canvas 等新的标签、2D 绘图、离线数据库存储等新的 API。而新标签 canvas 和 2D 绘图 API 组成了 HTML5 的绘图功能。HTML5 中的绘图与 VML 及 SVG 最大的不同在于前者的绘图基本上都是通过 API 调用来完成的，而后者是通过 XML 描述来实现的。所以从直观性和可读性来讲，VML 和 SVG 的 XML 元素能与生成的图形一一对应，HTML5 通过 API 来绘制图形，从开发的角度讲不是很直观，但是一些公司已经在开发一些工具来为 HTML5 绘图提供支持，比如 Adobe 不但宣称在 CS5 中支持 HTML5，而且在尝试提供开发工具来支持基于 HTML5 绘图的动画，甚至提供工具将 Flash 动画直接转成 HTML5 的 canvas 格式。所以，虽然 HTML5 中的通过 API 生成矢量图的方式不直观，但是如果有良好的开发工具的支持，加之其本是就是一个将将被广泛接受的通用标准，HTML5 将会成为未来 Web 上图形开发的趋势。
Canvas 是 HTML5 中的新的元素，用于在 Web 页面上绘制各种矢量图形。虽然 HTML5 还没有被各种浏览器全面支持，但绝大多数现代浏览器都支持 canvas 元素，而 IE8 及其以下版本基本不支持 HTML5（IE8 支持少部分内容，但不支持 canvas）。令人欣慰的是，微软最近已经证实将在 IE9 中支持 canvas 绘图等 HTML5 关键标签技术。作为 HTML 文档中的一个 DOM 节点，canvas 支持 height 和 width 两个属性用于定义尺寸。定义好 canvas 节点后，可以通过它的 getContext 函数来获得渲染上下文。一般支持 canvas 的浏览器都会支持 2D 绘图的上下文，而不少的浏览器已经可以支持 3D 上下文，图 5 所示的截图就是利用 3D 上下文在 canvas 上实现仿 Counter Strike 射击游戏。
图 5. canvas 的 3D 上下文实现的仿 Counter Strike 射击游戏
本文主要介绍 canvas 的 2D 绘图，3D 绘图与之是类似的。在 canvas 中，通过渲染上下文的 API 就可以绘制各种矢量图形，包括矩形、路径、各种线条、弧线、二次方曲线等。比较有趣的是，canvas 只支持一种基本形状——矩形，其它的形状都是由一个或多个路径组合而成。清单 6 绘制了一个矩形和一个三角形。在 Firefox3.5 上的运行结果如图 6 所示。
清单 6. 利用 HTML5 Canvas 绘制矩形和三角形<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> </canvas> </body> </html>
图 6. HTML5 的 canvas 绘制的矩形和三角形
相关文章
精彩导读
热门资讯
关注我们
