學習筆記：SVG和Canvas

SVG

SVG 與 Flash 相似，都是用於二維矢量圖形，兩者的區別在於，SVG 是一個 W3C 標準，基於 XML，是開放的。由於是 W3C 標準，SVG 與其餘的 W3C 標準，好比 CSS、DOM 和 SMIL 等可以協同工做。

SVG是W3C XML的分支語言之一，用於標記可縮放的矢量圖形。即使瀏覽器實現了一些規範，但實現速度徹底不能和它的競爭技術相比，它的競爭技術好比說HTML Canvas和Adobe Flash，都已經實現了成熟的應用接口。可是SVG也有自身的優勢，好比它實現了DOM接口（比Canvas方便），不須要安裝第三方插件就能夠在瀏覽器中使用（比Flash方便）。固然，是否使用SVG還要取決於你要實現什麼。

SVG的元素和屬性必須按標準格式書寫，由於XML是區分大小寫的（這一點和html不一樣）。

SVG裏的屬性值必須用引號引發來，就算是數值也必須這樣作。

經過 <img>元素嵌入SVG，你只須要在 src 屬性中引用它。你將須要一個height或width屬性（或者若是您的SVG沒有固有的寬高比）。

優勢

• 快速，熟悉的圖像語法與alt屬性中提供的內置文本等效。
• 能夠經過在<a>元素嵌套<img>，使圖像輕鬆地成爲超連接。

缺點

• 沒法使用JavaScript操做圖像。
• 若是要使用CSS控制SVG內容，則必須在SVG代碼中包含內聯CSS樣式。 （從SVG文件調用的外部樣式表不起做用）
• 不能用CSS僞類來重設圖像樣式（如:focus）。

你還能夠在文本編輯器中打開SVG文件，複製SVG代碼，並將其粘貼到HTML文檔中。

優勢

• 將 SVG 內聯減小 HTTP 請求，能夠減小加載時間。
• 您能夠爲 SVG 元素分配class和id，並使用 CSS 修改樣式，不管是在SVG中，仍是 HTML 文檔中的 CSS 樣式規則。 實際上，您可使用任何 SVG外觀屬性 做爲CSS屬性。
• 內聯SVG是惟一可讓您在SVG圖像上使用CSS交互（如:focus）和CSS動畫的方法（即便在常規樣式表中）。
• 您能夠經過將 SVG 標記包在<a>元素中，使其成爲超連接。

缺點

• 這種方法只適用於在一個地方使用的SVG。屢次使用會致使資源密集型維護（resource-intensive maintenance）。
• 額外的 SVG 代碼會增長HTML文件的大小。
• 瀏覽器不能像緩存普通圖片同樣緩存內聯SVG。
• 您可能會在<foreignObject> 元素中包含回退，但支持 SVG 的瀏覽器仍然會下載任何後備圖像。你須要考慮僅僅爲支持過期的瀏覽器，而增長額外開銷是否真的值得。

最後SVG能夠經過JavaScript動態建立並注入到HTML DOM中。 這樣具備一個優勢，能夠對瀏覽器使用替代技術，在不能解析SVG的狀況下，能夠替換建立的內容。

1 <svg version="1.1"
2      baseProfile="full"
3      width="300" height="200"
4      xmlns="http://www.w3.org/2000/svg">
5   <rect width="100%" height="100%" fill="red" />
6   <circle cx="150" cy="100" r="80" fill="green" />
7   <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
8 </svg>

 

繪製流程包括如下幾步：

1. 從svg根元素開始：
• 應捨棄來自 (X)HTML的doctype聲明，由於基於SVG的DTD驗證致使的問題比它能解決的問題更多。
• 屬性version和屬性baseProfile屬性是必不可少的，供其它類型的驗證方式肯定SVG版本。
• 做爲XML的一種方言，SVG必須正確的綁定命名空間 （在xmlns（ns即namespace）屬性中綁定）。
2. 繪製一個徹底覆蓋圖像區域的矩形 <rect/>，用fill把背景顏色設爲紅色。
3. 一個半徑80px的綠色圓圈<circle/>繪製在紅色矩形的正中央 （向右偏移150px，向下偏移100px）。
4. 繪製文字「SVG」。文字被填充爲白色， 經過設置居中的錨點把文字定位到指望的位置：在這種狀況下，中心點應該對應於綠色圓圈的中點。還能夠精細調整字體大小和垂直位置，確保最後的樣式是美觀的。

注意結束標記「/>」，也能夠用和html中同樣的結束標記。

 

Canvas

基本用法

<canvas>是一個可使用腳本(一般爲JavaScript)來繪製圖形的 HTML 元素。

Canvas 的默認大小爲300像素×150像素（寬×高，像素的單位是px）。可是，可使用HTML的高度和寬度屬性來自定義Canvas 的尺寸。注意，<canvas>直接寫在HTML中的width和height，與在CSS中寫給<canvas>的width和height是不同的，後者至關於在HTML中寫style=’width: …’，並且前者能夠不帶單位（不帶時單位也是px）。元素自己的屬性和CSS是不同的。

<canvas> 看起來和 <img> 元素很相像，惟一的不一樣就是它並無 src 和 alt 屬性，以及須要結束標籤(</canvas>)。若是你繪製出來的圖像是扭曲的, 嘗試用width和height屬性爲<canvas>明確規定寬高，而不是使用CSS。

<canvas>元素很容易定義一些替代內容。咱們只是在<canvas>標籤中提供了替換內容。不支持<canvas>的瀏覽器將會忽略容器並在其中渲染後備內容。而支持<canvas>的瀏覽器將會忽略在容器中包含的內容，而且只是正常渲染canvas。

canvas起初是空白的。爲了展現，首先腳本須要找到渲染上下文，而後在它的上面繪製。<canvas> 元素有一個叫作 getContext() 的方法，這個方法是用來得到渲染上下文和它的繪畫功能。getContext()只有一個參數，上下文的格式。對於2D圖像而言，如本教程，你可使用’2d’。

替換內容是用於在不支持 <canvas> 標籤的瀏覽器中展現的。經過簡單的測試getContext()方法的存在（即canvas.getContext），腳本能夠檢查編程支持性。

繪製形狀

不一樣於SVG，HTML中的元素canvas只支持一種原生的圖形繪製：矩形。全部其餘的圖形的繪製都至少須要生成一條路徑。

canvas提供了三種方法繪製矩形：fillRect(x, y, width, height)繪製一個填充的矩形，strokeRect(x, y, width, height)繪製一個矩形的邊框，clearRect(x, y, width, height)清除指定矩形區域，讓清除部分徹底透明。不一樣於的路徑函數（path function），以上的三個函數繪製以後會立刻顯如今canvas上，即時生效。

圖形的基本元素是路徑。路徑是經過不一樣顏色和寬度的線段或曲線相連造成的不一樣形狀的點的集合。使用路徑繪製圖形須要一些額外的步驟。

1. 生成路徑的第一步叫作beginPath()。
2. 第二步就是調用函數指定繪製路徑（路徑構造的第一條命令一般是moveTo（），指定起點，咱們也可以使用moveTo()繪製一些不連續的路徑）
3. 第三，就是閉合路徑closePath(),不是必需的。
4. 一旦路徑生成，你就能經過描邊stroke()或填充fill()路徑區域來渲染圖形。

如下是所要用到的函數：

beginPath()：新建一條路徑，生成以後，圖形繪製命令被指向到路徑上生成路徑。

closePath()：閉合路徑以後圖形繪製命令又從新指向到上下文中。

stroke()：經過線條來繪製圖形輪廓。

fill()：經過填充路徑的內容區域生成實心的圖形。

注意：當你調用fill()函數時，全部沒有閉合的形狀都會自動閉合，因此你不須要調用closePath()函數。可是調用stroke()時不會自動閉合。

繪製直線，須要用到的方法lineTo()。lineTo(x, y)繪製一條從當前位置到指定x以及y位置的直線。

變量名ctx意思是context。

繪製圓弧或者圓，咱們使用arc()方法。arc(x, y, radius, startAngle, endAngle, anticlockwise)畫一個以（x,y）爲圓心的以radius爲半徑的圓弧（圓），從startAngle開始到endAngle結束，按照anticlockwise給定的方向（默認爲順時針）來生成。參數anticlockwise爲一個布爾值。爲true時，是逆時針方向，不然順時針方向。

Math.PI是圓周率Π。

一樣，畫矩形也有用路徑的方法——rect()方法。rect(x, y, width, height)繪製一個左上角座標爲（x,y），寬高爲width以及height的矩形。當該方法執行的時候，moveTo()方法自動設置座標參數（0,0）。也就是說，當前筆觸自動重置回默認座標。

使用樣式和顏色

若是咱們想要給圖形上色，有兩個重要的屬性能夠作到：fillStyle 和 strokeStyle。

注意: 一旦您設置了 strokeStyle 或者 fillStyle 的值，那麼這個新值就會成爲新繪製的圖形的默認值。若是你要給每一個圖形上不一樣的顏色，你須要從新設置 fillStyle 或 strokeStyle 的值。

繪製文本

canvas 提供了兩種方法來渲染文本:fillText(text, x, y)在指定的(x,y)位置填充指定的文本；strokeText(text, x, y [, maxWidth])在指定的(x,y)位置繪製空心文本。

設置字體大小用font屬性，想要指定大小，則同時還要指定字體，默認的是 10px sans-serif。