本文摘自：興趣部落大神（為你一生畫眉）-講一講canvas究竟是個啥？ HTML5 的標準已經出來好久了，但是似乎其中的 Canvas 現在並沒有在太多的地方用到。一個很重要的原因是，Canvas 的標準還沒有完全確定，不適合大規模用在生產環境。但是，Canvas 的優點也是很明顯的，例如在繪製含有 ...
本文摘自：興趣部落大神（為你一生畫眉）-講一講canvas究竟是個啥？
HTML5 的標準已經出來好久了，但是似乎其中的 Canvas 現在並沒有在太多的地方用到。一個很重要的原因是，Canvas 的標準還沒有完全確定，不適合大規模用在生產環境。但是，Canvas 的優點也是很明顯的，例如在繪製含有大量元素的圖表的時候，SVG 往往因為性能問題而無法勝任，例如我見過的一次技術分享會的抽獎環節，雖然效果比較炫，但因為每個頭像都是 DOM，利用 CSS3 控制的動畫，導致了性能非常低下。此外，隨著硬體性能的提高，視頻截圖、圖像處理等功能也逐漸可以在網頁上實現了，大多數網站用的是 Flash，但是 Flash 在 Mac 電腦上性能不高，還需要學一些額外的知識。Canvas 則是直接使用 JavaScript 來進行繪圖，對 Mac 友好，所以不失為 Flash 的一個繼承者。
使用 Canvas
說了這麼多，Canvas 究竟是個啥？
英文中 Canvas 的意思是“畫布”，不過這裡說的 Canvas 是 HTML5 中新出的一個元素，開發者可以在上面繪製一系列圖形。Canvas 在 HTML 文件中的寫法很簡單：
<canvas id="canvas" width="寬度" height="高度"></canvas>
其中 id 屬性是所有 HTML 元素都可以用的，Canvas 自帶的屬性只有後面兩個（分別控制寬度、高度），沒有其它的了。至於相容性，CanIUse 上面寫了，基礎的功能目前用戶使用的 90% 的瀏覽器都支持，所以大部分情況下還是可以放心使用的。
