canvas和svg小記
一、關於canvas
<canvas> 是 HTML5 新增的元素，可用於通過使用JavaScript中的腳本來繪制圖形 例如，它可以用於繪制圖形，創建動畫。
<canvas> 最早由Apple引入WebKit 我們可以使用<canvas>標簽來定義一個canvas元素,canvas標簽的兩個屬性<canvas> 看起來和 <img> 元素很相像，唯一的不同就是它並沒有 src 和 alt 屬性。 實際上，<canvas> 標簽只有兩個屬性—— width和height，選擇不寫也可以。 當沒有設置寬度和高度的時候，canvas會初始化寬度為300像素
畫布的高寬 html屬性設置width height時只影響畫布本身不影畫布內容,即 <canvas width = " " height= " " ><canvas>
css屬性設置width height時不但會影響畫布本身的高寬， 還會使畫布中的內容等比例縮放（縮放參照於畫布默認的尺寸），即：<canvas style = " width : ; heigh : " ><canvas>
<canvas> 元素只是創造了一個固定大小的畫布，在矩形區域的畫布上，控制其每一像素，JavaScript 來繪制 2D圖形，逐像素進行渲染。canvas元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成。
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script> JavaScript 使用 id 來尋找 canvas 元素： var c=document.getElementById("myCanvas"); 然後，創建 context 對象： var cxt=c.getContext("2d"); getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。 下面的兩行代碼繪制一個紅色的矩形： cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75); fillStyle 方法將其染成紅色，fillRect 方法規定了形狀、位置和尺寸。 上面的 fillRect 方法擁有參數 (0,0,150,75)。意思是：在畫布上繪制 150x75 的矩形，從左上角開始 （canvas畫布的左上角為原點（0,0）
二、關於svg
SVG可縮放矢量圖形（Scalable Vector Graphics）是基於可擴展標記語言（XML），用於描述二維矢量圖形的一種圖形格式。SVG是W3C("World Wide Web ConSortium" 即 " 國際互聯網標準組織")在2000年8月制定的一種新的二維矢量圖形格式，也是規範中的網絡矢量圖形標準。SVG嚴格遵從XML語法，並用文本格式的描述性語言來描述圖像內容，因此是一種和圖像分辨率無關的矢量圖形格式。
下面的例子是一個簡單的 SVG 文件的例子。SVG 文件必須使用 .svg 後綴來保存：
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1"xmlns="網址"> <circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red"/> </svg> 第一行包含了 XML 聲明。請註意 standalone 屬性！該屬性規定此 SVG 文件是否是“獨立的”，或含有對外部文件的引用。 standalone="no" 意味著 SVG 文檔會引用一個外部文件 - 在這裏，是 DTD 文件。 第二和第三行引用了這個外部的 SVG DTD。該 DTD 位於 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。該 DTD 位於 W3C，含有所有允許的 SVG 元素。 SVG 代碼以 <svg> 元素開始，包括開啟標簽 <svg> 和關閉標簽 </svg> 。這是根元素。width 和 height 屬性可設置此 SVG 文檔的寬度和高度。version 屬性可定義所使用的 SVG 版本，xmlns 屬性可定義 SVG 命名空間。 SVG 的 <circle> 用來創建一個圓。cx 和 cy 屬性定義圓中心的 x 和 y 坐標。如果忽略這兩個屬性，那麽圓點會被設置為 (0, 0)。r 屬性定義圓的半徑。 stroke 和 stroke-width 屬性控制如何顯示形狀的輪廓。我們把圓的輪廓設置為 2px 寬，黑邊框。 fill 屬性設置形狀內的顏色。我們把填充顏色設置為紅色。 關閉標簽的作用是關閉 SVG 元素和文檔本身。 三、canvas與svg比較1.SVG具有豐富的DOM接口，在繪制方面Canvas是逐像素進行渲染的，也就是說，你需要告訴Canvas那個像素點什麽顏色，他就會老老實實的把這個像素點畫出來，但是要讓它處理點擊事件，拖動事件就要費功夫了，需要自己寫很多事件觸發的代碼。而SVG則不同SVG是將每個繪制的元素當成一個對象，天生的相應一切網頁原生DOM操作，當你需要個給一個矩形添加點擊事件時，你只需要addOnClickListener就可以了~可以說是非常方便。
2.Canvas繪制效率高，Canvas只關心我們需要在指定的位置繪制對應像素，這樣雖然讓我們的交互變得十分麻煩，但是大大提高了繪制效率，反觀SVG由於需要支持DOM操作，每個對象的屬性值更改時都要進行更新，這樣當繪制數據變化比較大或者對實時性要求較高時，就會出現卡頓的現象。
3.SVG不依賴分辨率，這也是SVG的一大優點，由於SVG繪圖時是根據函數公式計算得出的位置，所以在不同分辨率下均能顯現出優秀的效果，這一點在適配不同分辨率時大有用處，而canvas則是基於像素進行渲染的，所以會受到分辨率的影響。
下面的圖看起來可能更直觀一點：
canvas和svg小記