HTML5 Canvas效率如何？

js運行效率在提高

編程語言的效率是前提，js天然比不上native的C語言效率，因此Canvas效率無疑比不上原生的2D圖形繪製，可是js效率的提高是有目共睹的，以js與as爲例，基本操做（運算操做，集合操做，Map操做）已經超越ActionScript，尤爲是Google Chrome瀏覽器與as拉開了不小的距離，甚至某些方面超過java。

 

Canvas繪製效率不低

Canvas沒有dom操做，只是簡單的2D繪製，因此效率不低，Chrome瀏覽器下，每秒可繪製五萬個基本圖形元素（圓形，矩形或者線條），若是有陰影效果會慢不少，總的來講上萬元素的繪製仍是很輕鬆的

適合簡單應用

由於簡單，作一些像素處理，2D繪製，小遊戲啥的仍是很方便的，國際上有javascript 1k做品大賽（http://js1k.com/），用1024字節的js代碼，實現豐富的效果，基本上都用到canvas，因此在輕量小巧方面頗有優點

附上SVG與Canvas的適用範圍

 

複雜應用藉助第三方開發包

對於複雜應用，須要本身來解決無效區域，局部刷新，交互選中等功能，本身實現有些難度，這時候我建議藉助第三方開發包

Canvas學習資料

http://www.w3.org/TR/2dcontext/

https://developer.mozilla.org/en/docs/HTML/Canvas

http://www.w3schools.com/html/html5_canvas.asp

第三方類庫

KineticJS – kineticjs.com

EaselJS – www.createjs.com/#!/EaselJS

Qunee – qunee.com

Fabric.js – fabricjs.com