Canvas 與 SVG

什麼是SVG？

引用w3c的一段話就是：

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來定義用於網絡的基於矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有所損失


PS：`SVG` 在IE9以及`Firefox`和`chrome`下都支持

segmentFault的logo就是一個svg的實例，你們能夠在頁面上經過鼠標右鍵，而後點「查看頁面信息」，找到媒體，而後找到那張svg格式的logo將其另存爲看看：

這就是那段svg代碼：

SVG 代碼以 <svg> 元素開始，包括開啓標籤 <svg> 和關閉標籤 </svg> 。

SVG 有一些預約義的形狀元素，可被開發者使用和操做：

矩形 <rect>
圓形 <circle>
橢圓 <ellipse>
線 <line>
折線 <polyline>
多邊形 <polygon>
路徑 <path>

矩形rect

圓形circle

橢圓ellipse

線line

折線polyline

多邊形 polygon

path 標籤

標籤用來定義路徑。
下面的命令可用於路徑數據：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

註釋：以上全部命令均容許小寫字母。大寫表示絕對定位，小寫表示相對定位。

基本操做API

建立圖形

document.createElementNS(ns,tagName);

添加圖形

element.appendChild(childElement);

設置/獲取屬性

element.setAttribute(name,value);
element.getAttribute(name);

canvas

一樣，IE9以前的瀏覽器都不支持<canvas>元素，canvas和SVG的主要區別是：使用canvas繪製圖形是經過調用其API，而SVG則是經過構建一棵XML元素樹來實現的。

canvas的API

顏色、樣式和陰影屬性和方法

屬性	描述
fillStyle	設置或返回用於填充繪畫的顏色、漸變或模式
strokeStyle	設置或返回用於筆觸的顏色、漸變或模式
shadowColor	設置或返回用於陰影的顏色
shadowBlur	設置或返回用於陰影的模糊級別
shadowOffsetY	設置或返回陰影距形狀的垂直距離
shadowOffsetX	設置或返回陰影距形狀的水平距離

ctx.shadowOffsetX = 10; // 設置水平位移
ctx.shadowOffsetY = 10; // 設置垂直位移
ctx.shadowBlur = 5; // 設置模糊度
ctx.shadowColor = "rgba(0,0,0,0.5)"; // 設置陰影顏色

ctx.fillStyle = "#CC0000"; 
ctx.fillRect(10,10,200,100);

方法	描述
createLinearGradient()	建立線性漸變（用在畫布內容上）
createPattern()	在指定的方向上重複指定的元素
createRadialGradient()	建立放射狀/環形的漸變（用在畫布內容上）
addColorStop()	規定漸變對象中的顏色和中止位置

canvas主要屬性和方法

屬性	描述
save()	保存當前環境的狀態
restore()	返回以前保存過的路徑狀態和屬性
createEvent()
getContext()	返回一個對象，指出訪問繪圖功能必要的API
toDataURL()	返回canvas圖像的URL

canvas線條樣式屬性和方法

屬性	描述
lineCap	設置或返回線條的結束端點樣式
lineJoin	設置或返回兩條線相交時，所建立的拐角類型
lineWidth	設置或返回當前的線條寬度
miterLimit	設置或返回最大斜接長度

矩形方法

方法	描述
rect()	建立矩形
fillRect()	繪製"被填充"的矩形
strokeRect()	繪製矩形（無填充）
clearRect()	在給定的矩形內清除指定的像素

路徑方法

方法	描述
fill()	填充當前繪圖（路徑）
stroke()	繪製已定義的路徑
beginPath()	起始一條路徑，或重置當前路徑
moveTo()	把路徑移動到畫布中的指定點，不建立線條
closePath()	建立從當前點回到起始點的路徑
lineTo()	添加一個新點，建立從該點到最後指定點的線條
clip()	從原始畫布剪切任意形狀和尺寸的區域
quadraticCurveTo()	建立二次貝塞爾曲線
bezierCurveTo()	建立三次方貝塞爾曲線
arc()	建立弧/曲線（用於建立圓形或部分圓）
arcTo()	建立兩切線之間的弧/曲線
isPointInPath()	若是指定的點位於當前路徑中，返回布爾值

var canvas = document.getElementById('myCanvas');

if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
}
ctx.beginPath(); // 開始路徑繪製
ctx.moveTo(20, 20); // 設置路徑起點，座標爲(20,20)
ctx.lineTo(200, 20); // 繪製一條到(200,20)的直線
ctx.lineWidth = 1.0; // 設置線寬
ctx.strokeStyle = "#CC0000"; // 設置線的顏色
ctx.stroke(); // 進行線的着色，這時整條線才變得可見

轉換方法

方法	描述
scale()	縮放當前繪圖至更大或更小
rotate()	旋轉當前繪圖
translate()	從新映射畫布上的 (0,0) 位置
transform()	替換繪圖的當前轉換矩陣
setTransform()	將當前轉換重置爲單位矩陣。而後運行 transform()

文本屬性和方法

屬性	描述
font	設置或返回文本內容的當前字體屬性
textAlign	設置或返回文本內容的當前對齊方式
textBaseline	設置或返回在繪製文本時使用的當前文本基線

方法	描述
fillText()	在畫布上繪製"被填充的"文本
strokeText()	在畫布上繪製文本（無填充）
measureText()	返回包含指定文本寬度的對象

// 設置字體
ctx.font = "Bold 20px Arial"; 
// 設置對齊方式
ctx.textAlign = "left";
// 設置填充顏色
ctx.fillStyle = "#008600"; 
// 設置字體內容，以及在畫布上的位置
ctx.fillText("Hello!", 10, 50); 
// 繪製空心字
ctx.strokeText("Hello!", 10, 100);

圖像繪製方法

方法	描述
drawImage()	向畫布上繪製圖像、畫布或視頻 chrome不支持

像素操做方法和屬性

屬性	描述
width	返回 ImageData 對象的寬度
height	返回 ImageData 對象的高度
data	返回一個對象，其包含指定的 ImageData 對象的圖像數據

方法	描述
createImageData()	建立新的、空白的 ImageData 對象
getImageData()	返回 ImageData 對象，該對象爲畫布上指定的矩形複製像素數據
putImageData()	把圖像數據（從指定的 ImageData 對象）放回畫布上

圖像合成屬性

屬性	描述
globalAlpha	設置或返回繪圖的當前 alpha 或透明值
globalCompositeOperation	設置或返回新圖像如何繪製到已有的圖像上

什麼時候使用 canvas、什麼時候使用 SVG？

從性能方面選擇

性能對於高流量的網站來講是絕對關鍵的。雖然 Canvas 一般被視爲具備高性能，可是並不意味着它就是明顯的選擇。下圖顯示了 SVG 對象和 Canvas 對象之間在呈現時間上的差別。

通常狀況下，隨着屏幕大小的增大，畫布將開始降級，由於須要繪製更多的像素。隨着屏幕上的對象數目增多，SVG 將開始降級，由於咱們正不斷將這些對象添加到 DOM 中。這些度量不必定準確，如下方面的不一樣必定會引發變化：實現和平臺、是否使用徹底硬件加速的圖形，以及 js 引擎的速度。

下圖展現了適合用於canvas的場景以及svg的適合場景：

Canvas 是逐像素進行渲染的。在 SVG 中，每一個被繪製的圖形均被視爲對象。若是 SVG 對象的屬性發生變化，那麼瀏覽器可以自動重現圖形。

Canvas

依賴分辨率
不支持事件處理器
弱的文本渲染能力
可以以 .png 或 .jpg 格式保存結果圖像
最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪

SVG

不依賴分辨率
支持事件處理器
最適合帶有大型渲染區域的應用程序（好比谷歌地圖）
複雜度高會減慢渲染速度（任何過分使用 DOM 的應用都不快）
不適合遊戲應用