Web開發中的矢量繪圖(vml,svg)處理和應用

時間 2019-11-08

標籤 web 開發矢量繪圖 vml svg 處理應用欄目 HTML 简体版

原文原文鏈接

前言html

1991 年物理學家 Tim Berners-Lee 首次在因特網上發佈了 HTML 的初版描述規範文檔。通過了 20 多年的發展，HTML 語言成爲現在編程最爲普遍的語言和互聯網上採用最廣的文檔格式。雖然 HTML 發展十分迅速並具備諸多優勢，但其始終不能提供一個良好的矢量繪圖解決方案。不少應用爲得到絢麗的動畫和繪圖效果，不得已在頁面中嵌入大量的 Flash。這不只下降了頁面元素的交互性，大量的 Flash 同時嚴重影像了頁面性能，更加頭疼的是 Flash 內容不能被搜索引擎搜索。雖然有良好的跨瀏覽器特性，可是用戶不得不安裝一個瀏覽器插件。html5

本文首先針對不一樣瀏覽器詳細闡述不一樣的矢量繪圖解決方案，其中包括 HTML5 Canvas、SVG 以及 VML 等技術；以後針對每種不一樣的技術介紹其實現和使用方法；最後本文將介紹如何建立一個跨瀏覽器的矢量繪圖應用，並對當前的一些快瀏覽器矢量繪圖框架進行簡單介紹。算法

VML數據庫

VML ( Vector Markup Language ) 矢量可標記語言是一種基於 XML 語法的矢量繪圖語言。1998 年由 Autodesk ，Hewlett-Packard，Macromedia ，Microsoft 幾家公司共同向 W3C 提交，並但願可以成爲矢量繪圖的國際化標準。雖然 VML 最終沒有成爲 W3C 推薦的矢量繪圖標準，但其仍是被大量應用於 MS Office、Visio 等軟件和 IE 瀏覽器中。因爲 Office 和 IE 的成功和其廣闊的市場佔有率，VML 已經成爲在 IE 中首選的矢量繪圖語言。編程

因爲 VML 基於 XML 標準的矢量繪圖語言，VML 先天性的具備表示方法簡單、易於擴展等優點。簡單的一行標記代碼就可使開發人員快速繪製輸出線段、圓形、矩形、圓矩形、曲線、多邊形、弧型等矢量圖形。而且能夠經過修飾這些原色的邊框、陰影、填充、背景、漸變、箭頭等等來加強和提高其外觀效果。同時因爲 VML 與 HTML 兼容，能夠將 VML 與 HTML 混合在一塊兒使用。VML 所繪製的每個圖形，都跟 HTML 元素同樣是一個圖形對象，一樣支持 DHTML 對象編程模型、DHTML 事件編程模型。所以開發人員能夠利用 JavaScript 等腳本輕鬆的讀取、更改 VML 圖形對象的各類屬性，響應用戶觸發的鼠標、鍵盤等事件，實現與用戶交互。若是有機的配合定時器和一些其餘模型，則能實現相似 Flash 般複雜的動畫，輸出高質量質量動畫效果。canvas

VML 的使用很是簡單，它採用 HTML 的標籤方式來定義和繪製圖像。例以下面的代碼所示：瀏覽器

清單 1.VML 代碼示例
網絡

<html xmlns:v="urn:schemas-microsoft-com:vml">  <style>v\:*{behavior:url(#default#VML);position:absolute}</style>  <body>  <v:oval style="left:0;top:0;width:100;height:50" fillcolor="blue"/>  </body>  </html>

如清單 1 所示，上面代碼是一段簡單的 VML 示例代碼，繪製出一個藍色的橢圓形。其中 xmlns 標記的全稱是 XML NameSpace，用來指定該文檔的命名空間。 Behavior 是 IE5.0 版本之後推出的一個很是強大功能。一般狀況下 Behavior 與樣式表結合一塊兒使用，給任何 HTML 對象增長新的行爲，例如新的屬性、方法、事件等等。在上面的示例代碼中，Behavior 的用處是把命名空間「v」和系統預約義的行爲 VML 鏈接起來，提供系統默認的 VML 功能。v:oval 標籤則定義一個橢圓形的 VML 圖形，fillcolor 屬性指定該圖形用藍色來填充。app

圖 1. 清單 1 示例代碼效果圖
框架

VML 默認定義了許多圖形元素，包括：Shape 基本抽象形狀，它在 VML 中表明任何形狀；Line 直線或者線段；Polyline 表明特殊的線段，它將 Points 屬性所指定的一系列的點鏈接起來；Rect 表明矩形對象，它在流程圖的繪製中很是經常使用；Roundrect 顧名思義爲圓角矩形，它的功能和矩形對象基本上同；Oval 是 VML 中的圓形對象，你能夠定義它的寬度和高度來獲得不一樣的橢圓形狀，還能夠經過指定 arc 弧屬性來繪製一個圓上一段弧度，利用 Oval 對象咱們能夠繪製出各類咱們想要的曲線；Group 是 VML 中的一個容器標籤，它的使用很簡單，但功能很強大。它能讓一系列的 VML 對象使用共同的座標系和縮放尺度，這樣改變 CoordSize 值可使得這一組圖形的座標和縮放尺度一塊兒改變。Group 常常被用來實現一組適量圖形的動態放大和縮小。

VML 看似簡單的標籤和屬性卻定義了不少功能強大的組件。將這些圖形標籤組合在一塊兒使用能夠繪製出不少漂亮、複雜甚至是使人不可思議的畫面，例以下圖就是一個利用 VML 繪製出的《蒙娜麗莎》畫像。若是在於 JavaScript 等腳本混合使用，能夠繪製出和 Flash 同樣絢麗的動畫和遊戲效果。

圖 2. VML 在 IE 瀏覽器中繪製出的《蒙娜麗莎》畫像

SVG

SVG 是可擴展矢量圖（Scalable Vector Graphics）的簡稱，它是 W3C 組織爲適應因特網的飛速發展而制定的一套基於 XML 語言的二維矢量圖形的語言描述規範。W3C 中的 SVG 開發工做組的的成員包括了 IBM、Adobe、Apple、Microsoft、AutoDesk 等一批知名廠商，使其成爲了通用的標準。並且隨着移動通信的迅猛發展，W3C 又推出了 SVG 的移動版本，並被多個移動設備廠商的多個型號的手機所支持，併成爲 3G 時代的一個重要的技術標準。在 PC 平臺上，因爲 SVG 經常使用於豐富 Web 頁面內容，一部分瀏覽器已經提供了對 SVG 格式的一些支持，如 Firefox、Safari 等，而 IE 系列瀏覽器中的 IE6,、IE7 和 IE8 都沒有對 SVG 提供支持。但微軟顯然已經意識到 SVG 標準的已經變得愈來愈普及，因此不但加入了 W3C 下面的 SVG 工做小組，更是在已經發布的 IE9 的 Beta 版中提供了對 SVG 基本特性的支持。值得注意的是，雖然不少瀏覽器甚至微軟的 IE9 都已經對 SVG 提供必定的支持，可是其中很多隻是支持 SVG 標準的部分功能，若是想讓這些瀏覽器全面支持 SVG 標準，須要安裝一些 SVG 的瀏覽插件，好比 Adobe SVG Viewer。藉助這些 SVG 插件，瀏覽器上可支持絕大部分現有 SVG 規範中的內容，這裏說「絕大部分」是由於 SVG 至今仍然是一個發展的標準，如今和未來的都會有一些新的變化，這些 SVG 瀏覽插件只會支持在某個穩定版本下的肯定的功能。當前 SVG 的穩定版本是 W3C 於 2003 年 1 月份發佈的 SVG1.1，後續版本 SVG1.2 正在研究制定的過程當中。

SVG 遵循 XML 格式的描述語言來描述矢量圖形的內容，支持三種矢量顯示對象，包括矢量圖形對象（矩形、圓，曲線等）、嵌入式外部對象（PNG、JPEG、SVG 等）和文字對象。SVG 最終的文件格式是文本，對開發人員來講具備良好的可讀性和可擴展性。平均來說，SVG 文件的大小要小於 JPEG 等其餘的網絡圖形格式，並且 SVG 支持利用 gzip 壓縮算法進行壓縮從而得到很大的壓縮比，壓縮後生成的文件格式爲 SVGZ。由於 SVG 中的矢量顯示對象是被描述出來的，因此支持無損的放大縮小，而對於那些柵格圖形格式，如 BMP，JPEG 等，放大或是縮小須要利用數值算法進行插值而形成失真。SVG 圖形格式支持文字對象，能夠很方便的創建文字索引，進而實現基於內容的圖像搜索。SVG 格式支持多種濾鏡和特殊效果，如給文字內容加上陰影。此外，最重要的一點是 SVG 具備良好的動態性，一方面自身的有基於 SMIL（Synchronized Multimedia Integration Language，同步多媒體集成語言）標準的動態內容；另外一方面能夠利用 JavaScript 腳原本控制對象，來提供良好的互動。SVG 的這些特性使其獲得了普遍的支持和應用。

SVG 經過多種標籤元素來構成整個的矢量圖形，包括根元素 svg，圖形對象：rect（矩形）、circle（圓）、ellipse（橢圓）、line（線）、polygon（多邊形）、polyline（多直線圖形）、path（路徑生成圖形）等。濾鏡效果：feBlend、feColorMatrix、feComponentTransfer、feComposite、feConvolveMatrix 等，漸變效果：線性漸變和徑向漸變。SVG 文檔通常是以獨立的文件存在的，而且以 .svg 做爲擴展名，若是是 GZIP 壓縮過的文件則以 .svgz 做爲擴展名。下面的清單 2 是一個 SVG 靜態圖形文件的例子，其中先是定義了一個高斯濾鏡的效果和一個線性梯度的效果，隨後定義了一個正方形和一個橢圓，將已定義線性梯度應用於前者，高斯濾鏡應用於後者。將清單 2 中的內容保存到一個文本文件並以 svg 做爲擴展名，用 1.5 以上版本的 Firefox 瀏覽器打開，就會看到圖 3 中所示的內容。

清單 2. SVG 靜態圖形的文件

<svg version="1.1" width="500" height="500"  xmlns="http://www.w3.org/2000/svg" >     <defs>        <filter id="Gaussian_Blur">           <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>        </filter>        <linearGradient id="Gradient_Linear" x1="0%" y1="0%" x2="100%" y2="0%">           <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>           <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>        </linearGradient>     </defs>     <rect x="12" y="12" width="100" height="80" style="fill:url(#Gradient_Linear)"/>     <ellipse cx="240" cy="100" rx="100" ry="50"     style="fill:purple;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/>   </svg>

圖 3. SVG 靜態圖形在 Firefox 瀏覽器中的展示

上面的例子是用 Firefox 直接打開 SVG 文檔文件來瀏覽，可是在通常的 Web 應用中，更多的狀況是將 SVG 文檔嵌入到 HTML 頁面中，在瀏覽器渲染頁面的時候直接將 SVG 的圖像渲染到展示頁面上。將 SVG 圖形嵌入 HTML 頁有四種方式：經過 object 標籤，經過 embed 標籤，經過 iframe 標籤和直接將 SVG 的內容嵌入到頁面中。然而，如今支持 SVG 的主流的瀏覽器包括 Firefox、Safari 等不支持將 SVG 內容直接嵌入的方式，對另外三種方式基本可以支持。清單 3 給出了利用 object 標籤、embed 標籤和 iframe 標籤將上面的 SVG 文檔嵌入 HTML 頁面的例子。圖 4 給出了這個 HTML 文檔在 Firefox 上的展示結果。

清單 3. 嵌入 SVG 文檔的 HTML 頁面

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     <head>        <title>SVG as embedded object and nested namespace</title>     </head>     <body>        <h2>Object</h2>        <object type="image/svg+xml" data="svg1.svg" ></object>        <h2>IFrame</h2>        <iframe  src ="svg1.svg"  width ="500"  height ="200" frameborder="no"></iframe>        <h2>Embed</h2>        <embed src="svg1.svg" />     </body>   </html>

圖 4. Firefox 打開的嵌入 SVG 文檔的 HTML 頁面

SVG 支持的動態特性既包括 SVG 圖像自身的動畫也包括 SVG 圖像的各類交互功能。SVG 的動畫是 SVG 規範中的特性，使用不一樣的標籤元素來聲明，它們中有一部分是在 SMIL 定義的，如 animate、set、animateMotion 和 animateColor，剩下的則是 SVG 標準擴展的，如 animateTransform。另外，SVG 還爲 animateMotion 標籤元素添加了三個屬性：path、keyPoints、rotate，以及一個子標籤元素 mpath。在下面的例子中，咱們將用 animate 和 set 來實現一些效果。animate 容許一個圖形元素的某個屬性的值在一段時間內等量的變化，而 set 則是在一段時間內將值賦給某個屬性，具體如清單 4 中的代碼所示。因爲 Firefox3. 版本不支持 SVG 的動畫，因此這段文檔中動畫須要用其餘支持 SVG 動畫的瀏覽器如 Safari 或是安裝 SVG Viewer 纔可瀏覽。

清單 4. 加入動畫效果的 SVG 文檔

<svg version="1.1" width="500" height="200"  xmlns="http://www.w3.org/2000/svg" >    <defs>       <linearGradient id="Gradient_Linear" x1="0%" y1="0%" x2="100%" y2="0%">          <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>          <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>       </linearGradient>    </defs>    <rect x="12" y="12" width="100" height="80" style="fill:url(#Gradient_Linear)">       <animate attributeName="width" to="300" dur="5s" fill="freeze"/>       <animate attributeName="width" to="100" begin="5s" dur="5s" fill="freeze"/>       <set attributeName="fill" to="yellow" begin="3s" dur="4s"/>    </rect>  </svg>

SVG 圖像的交互包括 SVG 中的連接、事件響應以及腳本支持。SVG 中的每個圖形對象均可以包裝在不一樣的連接標籤裏面。與 HTML 中的連接的標籤相同，SVG 也使用 <a> 來表示連接，將其與一個 xlink:href 屬性結合就能夠創建一個連接。<a> 和 </a> 標籤之間的全部內容做爲連接點。SVG 標準支持鼠標和鍵盤事件，能夠在 XML 描述文檔中直接定義對這些事件的監聽和響應，這些響應通常是某個動畫設定，經過上文提到的 set、animate 等來實現。雖然經過 SVG 的 XML 元素已經能夠實現必定的動畫效果和事件響應，但若是想要實現更復雜的邏輯就須要腳本的支持。SVG 支持經過 JavaScript 腳本訪問 SVG 文檔構成的 DOM 節點樹，查詢、修改 DOM 節點的屬性，調用其公開的方法，監聽其發佈的事件。JavaScript 腳本能夠經過 script 元素直接嵌入到 SVG 文檔中或是經過 script 的 xlink:href 來從外部腳本文件引入。清單 5 中給出的例子是在清單 4 的基礎上加入了些 JavaScript 腳本，實現了對原正方形的矢量圖形的鼠標單擊事件的響應。這個事件處理的函數中進行了一些節點添加和刪除的操做：將包含「IBM」文本的 Text 節點刪掉，建立了一個包含「BTT」文本的 Text 節點並添加到 SVG 的 DOM 樹中。

清單 5. 加入 JavaScript 腳本的 SVG 文檔

<svg version="1.1" width="500" height="200"  xmlns="http://www.w3.org/2000/svg" >     <defs>        <linearGradient id="Gradient_Linear" x1="0%" y1="0%" x2="100%" y2="0%">           <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>           <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>        </linearGradient>     </defs>     <rect id="rect1" onclick="showBTT()" x="12" y="12" width="100" height="80"     style="fill:url(#Gradient_Linear)">        <animate id="a1" 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 id="g1" 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 id="canvas1" height="600" width="600">       </canvas>    </body>  </html>

圖 6. HTML5 的 canvas 繪製的矩形和三角形

與 SVG 相似，HTML5 canvas 也支持引入圖像，這會提供一個很是有趣的功能就是能夠利用矢量繪圖和圖像引用來進行圖像合成。清單 7 所示的就是用一個座標圖做爲背景，在上面完成曲線繪製，圖 7 是在 Firefox3 上運行的結果。

清單 7. 引入圖像的 HTML5 canvas 繪圖

<html>    <head>       <script>          window.onload = function() {             var canvas = document.getElementById('canvas1');             var ctx = canvas.getContext('2d');             var img = new Image();              img.onload = function(){                 ctx.drawImage(img,0,0);                 ctx.beginPath();                 ctx.moveTo(30,96);                 ctx.lineTo(70,66);                 ctx.lineTo(103,76);                 ctx.lineTo(170,15);                 ctx.stroke();              }              img.src = 'coordinate.png';           }       </script>    </head>    <body>       <canvas id="canvas1" height="600" width="600"></canvas>    </body>  </html>

圖 8. HTM5 canvas 繪製的座標曲線

HTML5 的 canvas 提供經過繪圖上下文的屬性來設定圖形的顏色和式樣，如經過 fillStyle 設定圖形的填充顏色，經過 strokeStyle 設定圖形輪廓的顏色，經過 globalAlpha 來設置全局透明度，經過 lineWidth 來設置線條寬度等。如在清單 7 的代碼中加入顏色設定，就能夠畫出有顏色的曲線，如清單 8 所示。

清單 8. 爲座標曲線加入顏色設定

img.onload = function(){     ctx.drawImage(img,0,0);    // 顏色設定   ctx.strokeStyle = 'rgb(255, 0, 0)';    ctx.beginPath();     ctx.moveTo(30,96);     ctx.lineTo(70,66);     ctx.lineTo(103,76);     ctx.lineTo(170,15);     ctx.stroke();   }

除了上面介紹的繪製圖形、引入圖像和顏色式樣設定，HTML5 的 canvas 上的矢量繪圖還包括變形、組合等高級特性，這裏就再也不詳述。

如前所述，SVG 和 VML 都是經過 XML 來描述圖形對象的，每個圖形對象都會對應必定的 DOM 樹節點，因此能夠將事件處理直接綁定在圖形節點上。而 HTML canvas 是畫布的機制，除了正方形外，其他的圖形要經過畫線來完成，這就不能採起相似 SVG 和 VML 中 DOM 節點的那種直接的綁定方式。在 HTML5 的 canvas 上若是想爲某個圖形綁定一個鼠標點擊事件，須要在鼠標事件的回調函數中計算鼠標點擊的位置和圖形的範圍，若是鼠標事件落在了目標圖形內，則調用圖形的鼠標點擊事件處理函數。因此，相比 SVG、XML，HTML5 canvas 在事件處理上並無提供高級封裝。固然，隨着 HTML5 canvas 的普及和發展，會有基於 HTML5 矢量繪圖的工具庫出現，幫助實現必定的封裝，提供一些高級的事件綁定功能。

HTML5 的 canvas 是能夠實現動畫功能的，因此當前流行着一種說法是 HTML5 canvas 終將取代 Adobe 的 Flash 技術而成爲將來動畫技術的標準。這二者將來誰將成爲主導不是本文的關注點，但有一點要注意的是 HTML5 並不像 Flash 那樣專門爲動畫而設計。在對動畫功能的支持上，Flash 針對動畫的一些功能設計比當前的 HTML5 先進；在動畫的運行環境上，Flash 是在 Flash 播放器上運行，HTML5 canvas 是在瀏覽器上運行，前者理應更穩定更高效；在動畫的實現機制上，二者是相同的，都是定時的刷新重繪。因此要利用 HTML5 canvas 實現動畫效果，一方面要利用其作到刷新和重繪，同時還要使用 JavaScript 中的定時器。清單 9 給出了利用 HTML5 的 canvas 實現的動畫。在其中咱們設置了一個定時器，按期的清空原來畫布上的內容，而後從新繪製。

清單 9. 利用 HTML5 canvas 和 Javascipt 定時器實現的動畫

<html>     <head>        <script>           window.onload = function() {              var dx = -1;              var dy = 0;              var x = 125;              var y = 125;              setInterval(function(){                 var canvas = document.getElementById('canvas1');                 var ctx = canvas.getContext('2d');                 ctx.clearRect(0,0,600,600);                  ctx.fillStyle = 'rgb(255, 0, 0)';                 ctx.strokeStyle = 'rgb(255, 0, 0)';                 ctx.fillRect(25,25,100,100);                 ctx.clearRect(45,45,60,60);                 ctx.strokeRect(50,50,50,50);                 ctx.fillStyle = 'rgb(0, 0, 255)';                 ctx.strokeStyle = 'rgb(0, 0, 255)';                    ctx.beginPath();                 x += dx;                 y += dy;                 ctx.moveTo(x,y);                 ctx.lineTo(x + 80, y);                 ctx.lineTo(x, y + 80);                 ctx.fill();                 if(x == 25 ) {                    dx = 1;                 }                 if(y == 25) {                    dy = 1;                 }                 if(x == 125 && y == 125) {                    if(dx == 1) {                       dy = -1                       dx = 0;                    }                    if(dy == 1) {                       dx = -1;                       dy = 0;                    }                 }              },50);           }        </script>     </head>     <body>        <canvas id="canvas1" height="600" width="600">        </canvas>     </body>   </html>

在本小節中咱們介紹了 HTML5 canvas 矢量繪圖的一些基本概念、經常使用 API、動態交互以及動畫效果的實現，相比較 SVG 和 VML，HTML canvas 針對的是更爲底層的繪圖功能，可是利用這些底層的 API，經過良好的結構功能設計和封裝，徹底能夠實現功能強的易用性更好的組件庫，這在咱們的後續文章中介紹。

開源矢量繪圖框架 Raphael

Raphael 是一個很小的輕量級矢量繪圖類庫。正如其名，它能讓你像文藝復興時期意大利畫家拉斐爾同樣在 Web 頁面上繪製出複雜絢麗的矢量圖形。Raphael 使用 W3C 推薦的 SVG 和 VML 爲矢量繪圖的基礎，對於目前主流的 Firefox、Webkit、Opearo 瀏覽器上 Raphael 使用 SVG 繪製圖形，對於 IE6/7/8 瀏覽器 Raphael 使用 VML 來繪製圖形。Raphael 在瀏覽器中建立的全部圖形對象都是一個 HTML DOM 對象，這樣你就可使用 JavaScript 爲其添加事件和響應，經過 JavaScript 方法來動態的改變圖像對象，從而實現任何你想要的動畫效果。Raphael 爲 Web 開發人員在瀏覽器中建立矢量圖形提供了一個橋樑，它簡化了 Web 應用中矢量兩會圖開發，今後你沒必要再爲跨瀏覽器、使用和維護各類不一樣的矢量繪圖技術而頭疼。目前 Raphael 支持 Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+ 等瀏覽器。

使用 Raphael 建立矢量圖形很是簡單，下面是一些使用 Raphael 的一些代碼和圖形示例。

清單 10. 使用 Raphael 建立矢量圖形代碼示例

// 在座標點 10, 50 位置建立一個 320 × 200 大小的畫布  varpaper = Raphael(10, 50, 320, 200);  // 在 x = 50, y = 40 位置畫一個半徑爲 10 的圓形 varcircle = paper.circle(50, 40, 10);  // 使用紅色 (#f00) 來填充這個圓形 circle.attr("fill", "#f00");   // 設置畫筆爲白色 circle.attr("stroke", "#fff");

圖 9. 使用 Raphael 繪製的一些矢量圖形

對於矢量繪圖的幾點建議

雖然 Web 下的矢量繪圖功能十分強大，但因爲不少實際緣由這部分技術並無被普遍應用。在此根咱們對矢量繪圖的使用經驗給出一些使用矢量繪圖的建議：

對於一些以實驗爲目的、非正式商用或者一些特殊需求的應用，大可沒必要考慮瀏覽器過多的兼容性等問題，使得問題變得過於複雜。可直接使用 HTML5 的 canvas。
對於嚴格要求衆多瀏覽器兼容性的應用，能夠經過動態判斷瀏覽器的類型在 IE 中使用 VML，在其餘瀏覽器中使用 SVG。但更推薦直接使用 Raphael 開源類庫。
儘可能控制矢量繪圖的使用範圍，使得若是矢量繪圖技術在本地瀏覽器不可用時，不影響基本功能的使用。例如：利用矢量繪圖繪製報表圖形，廣告，等等。

小結

隨着當今社會對各類產品和服務的用戶體驗的要求愈來愈來高，矢量繪圖在 Web 頁面開發中的重要性與日俱增。本文對當前主流的三種 Web 矢量繪圖技術進行了詳細的介紹。並以開源項目 Raphael 爲例介紹了混合矢量繪圖技術。在此基礎上對 Web 應用中如何使用矢量繪圖技術給出了一些建議。雖然，如本文所述，Web 上的矢量繪圖技術暫時尚未哪種能成爲主導，可是隨着技術的發展和需求的加強，終將會有1、兩種已存在的或新的矢量繪圖技術脫穎而出並被普遍接受和使用，把咱們的網絡生活裝扮的更加「豐富多彩」。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。