HTML5中可以繪制圖形的元素：1、“canvas”元素，可通過JavaScript腳本來動(dòng)態(tài)繪制圖形；2、“SVG”元素，可定義用于網(wǎng)絡(luò)的基于矢量的圖形，使用XML格式定義圖形。

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

HTML5 Canvas 和 SVG 都允許您在瀏覽器中創(chuàng)建圖形，但是它們?cè)诟旧鲜遣煌摹?/p>

SVG

• SVG 是一種使用 XML 描述 2D 圖形的語言。

• SVG 基于 XML，這意味著 SVG DOM 中的每個(gè)元素都是可用的。您可以為某個(gè)元素附加 JavaScript 事件處理器。

• 在 SVG 中，每個(gè)被繪制的圖形均被視為對(duì)象。如果 SVG 對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。

Canvas

• Canvas 通過 JavaScript 來繪制 2D 圖形。

• Canvas 是逐像素進(jìn)行渲染的。

• 在 canvas 中，一旦圖形被繪制完成，它就不會(huì)繼續(xù)得到瀏覽器的關(guān)注。如果其位置發(fā)生變化，那么整個(gè)場(chǎng)景也需要重新繪制，包括任何或許已被圖形覆蓋的對(duì)象。

一、Canvas

canvas是HTML5中新增一個(gè)HTML5標(biāo)簽與操作canvas的javascript API，它可以實(shí)現(xiàn)在網(wǎng)頁中完成動(dòng)態(tài)的2D與3D圖像技術(shù)。<canvas> 標(biāo)記和 SVG以及 VML 之間的一個(gè)重要的不同是，<canvas> 有一個(gè)基于 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個(gè) XML 文檔來描述繪圖。SVG 繪圖很容易編輯與生成，但功能明顯要弱一些。

canvas可以完成動(dòng)畫、游戲、圖表、圖像處理等原來需要Flash完成的一些功能。

1、創(chuàng)建canvas

<canvas  id="draw" width="600" height="600"></canvas>

　在html中創(chuàng)建一個(gè)canvas標(biāo)簽，最好再在標(biāo)簽本身中設(shè)置寬高，如果用其他方式設(shè)置寬高會(huì)有0.5的位移差

var draw=document.getElementById("draw"); //獲取畫布元素 var draws=draw.getContext("2d"); //給畫布一個(gè)繪制環(huán)境，2d表示在2d環(huán)境下繪制 //draws返回的是一個(gè)對(duì)象

2、繪制

//繪制線條  //設(shè)置線寬 draws.lineWidth = 10; //設(shè)置線的顏色 draws.strokeStyle = "blue";              draws.moveTo(0,0);  //移動(dòng)畫筆到0,0點(diǎn) draws.lineTo(300,300);  //畫線到300,300的位置 draws.stroke();  //執(zhí)行描邊  //繪制矩形 draws.strokeRect(x,y,width,height) //繪制一個(gè)邊框矩形 draws.fillRect(x,y,width,height) //繪制一個(gè)填充矩形  draws.clearRect(x,y,width,height) //清除一個(gè)矩形   //繪制圓形 draws.arc(x,y,radius,startAngle,endAngle,anticlockwise) //arc方法用來繪制一段圓弧路徑，以(x,y)圓心位置radius為半徑、startAngle為起始弧度、 //endAngle為終止弧度來，而在畫圓弧時(shí)的旋轉(zhuǎn)方向則由最后一個(gè)參數(shù) anticlockwise 來指定， //如果為 true 就是逆時(shí)針，false 則為順時(shí)針，Math.PI * 2 剛好為一周。  //繪制圖像  //在html中加入一個(gè)img標(biāo)簽  <img src="1.jpg" id="pic"/> //在JS中... //需要將頁面中的圖片都加載完之后執(zhí)行 window.onload=function(){    //繪制文字  //描邊文字 draws.font="50px microsoft yahei"  //設(shè)置描邊字體顏色 draws.strokeText("Hello",20,100)   //設(shè)置描邊文字內(nèi)容，和X坐標(biāo)Y坐標(biāo)  //填充文字  draws.fillStyle="red" //設(shè)置填充字體顏色 draws.fillText("Hello",20,200);   //設(shè)置填充文字內(nèi)容，和X坐標(biāo)Y坐標(biāo)

3、理解一些canvas方法

draws.beginpath() draws.closepath() // 二者同時(shí)出現(xiàn)  將繪制路徑閉合 ,自動(dòng)將路徑閉合   draws.save() draws.restore() //二者成對(duì)出現(xiàn) 中間的屬性樣式只影響內(nèi)部 不影響外部   //translate() draws.strokeRect(0, 0, 150, 150);  draws.translate(150, 150);  draws.strokeRect(0, 0, 150, 150); //被平移的元素 //平移后這個(gè)被平移的元素的坐標(biāo)就會(huì)改變   //rotate()  draws.rotate(0.2);  draws.strokeRect(75, 75, 75, 75); //根據(jù)畫布的0，0點(diǎn)旋轉(zhuǎn)

二、SVG

SVG可縮放矢量圖形（Scalable Vector Graphics）是基于可擴(kuò)展標(biāo)記語言（XML），用于描述二維矢量圖形的一種圖形格式。SVG是W3C("World Wide Web ConSortium" 即 " 國(guó)際互聯(lián)網(wǎng)標(biāo)準(zhǔn)組織")在2000年8月制定的一種新的二維矢量圖形格式，也是規(guī)范中的網(wǎng)絡(luò)矢量圖形標(biāo)準(zhǔn)。SVG嚴(yán)格遵從XML語法，并用文本格式的描述性語言來描述圖像內(nèi)容，因此是一種和圖像分辨率無關(guān)的矢量圖形格式。SVG 于 2003 年 1 月 14 日成為 W3C 推薦標(biāo)準(zhǔn)。

特點(diǎn)：

1、任意放縮

用戶可以任意縮放圖像顯示，而不會(huì)破壞圖像的清晰度、細(xì)節(jié)等。

2、文本獨(dú)立

SVG圖像中的文字獨(dú)立于圖像，文字保留可編輯和可搜尋的狀態(tài)。也不會(huì)再有字體的限制，用戶系統(tǒng)即使沒有安裝某一字體，也會(huì)看到和他們制作時(shí)完全相同的畫面。

3、較小文件

總體來講，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下載也很快。

4、超強(qiáng)顯示效果

SVG圖像在屏幕上總是邊緣清晰，它的清晰度適合任何屏幕分辨率和打印分辨率。

5、超級(jí)顏色控制

SVG圖像提供一個(gè)1600萬種顏色的調(diào)色板，支持ICC顏色描述文件標(biāo)準(zhǔn)、RGB、線X填充、漸變和蒙版。

6、交互X和智能化。SVG面臨的主要問題一個(gè)是如何和已經(jīng)占有重要市場(chǎng)份額的矢量圖形格式Flash競(jìng)爭(zhēng)的問題，另一個(gè)問題就是SVG的本地運(yùn)行環(huán)境下的廠家支持程度。

瀏覽器支持：

Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。
IE8和早期版本都需要一個(gè)插件 – 如Adobe SVG瀏覽器，這是免費(fèi)提供的。

1、引入方法

方法1：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 繪制圖形 </svg>

• xmlns:命名空間

• version：版本

方法2：

<img src="01.svg" alt="">

2、繪制

<svg>  //繪制直線   <line x1="0" y1="0" x2="500" y2="500" style="stroke:rgb(0,0,255);stroke-width:3"></line>  //參數(shù)： //x1 屬性在 x 軸定義線條的開始 //y1 屬性在 y 軸定義線條的開始 //x2 屬性在 x 軸定義線條的結(jié)束 //y2 屬性在 y 軸定義線條的結(jié)束  //繪制圓形、橢圓  <circle r="50" cx="110" cy="60" fill="lightskyblue"></circle>  <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:dodgerblue;stroke-width:5"><ellipse/>  //參數(shù) //CX屬性定義的橢圓中心的x坐標(biāo) //CY屬性定義的橢圓中心的y坐標(biāo) //RX屬性定義的水平半徑 //RY屬性定義的垂直半徑  //繪制文本  <text x="0" y="50" fill="blue" style="font-size:30px; font-family: 'microsoft yahei';">My Text</text>   //繪制矩形   <rect x="40" y="60" width="260" height="260" style="fill:blue;stroke:pink;stroke-width:5;  //繪制圖像  <image x="20" y="20" width="100" height="80" xlink:href="./img/1.jpg"></image>  //繪制路徑   <path d="M70 0 L100 150 L40 150 Z" stroke="plum" fill="plum" ></path>  //參數(shù) //M是起點(diǎn)坐標(biāo) L是相鄰點(diǎn)坐標(biāo) Z讓路徑構(gòu)成閉合回路 //H代表水平的線條 默認(rèn)y軸上的值一樣 //V 代表垂直的線條 默認(rèn)x軸上的值一樣/ //A 后面跟七個(gè)值  //繪制多邊形  <Polygon points=””></polygon>  //points：多邊形的點(diǎn)  //繪制折線  <polyline points=”” ></polyline>  //points：折線的點(diǎn)   </svg>