問題描述

產生這個問題前，我先查詢的是svg和canvas的區別，有一個根本的卻別是：

svg可以當作xml，可以放大縮小，像html一樣操作 而canvas則是一個實實在在畫布，像swf那樣，編輯起來不是很方便，但是效率高

從這里可以看出兩者各有優劣，再后來我又看了CSS3，我發現CSS3結合了兩者的長處：

可以結合DOM，和svg一樣容易操作渲染效率高，可以像canvas在dom上畫出任意形狀

那么我有這么幾個問題：

有了css3之后，我們還需要svg還有canvas嗎？他們各自的有缺點是什么什么場合適合用CSS3，什么場合適合用svg，什么場合適合canvas目前這三者有什么知名的框架來便于操作、使用嗎？他們三者目前瀏覽器兼容情況如何，希望能提供參考頁面或者圖表說明

問題解答

回答1：CSS3在DOM節點多的情況下效率嚴重下降。CSS3的旋轉比canvas（2d）要好。CSS3的文字渲染比canvas好。canvas可以在更底層操作。canvas支持webgl，可秒殺一切。canvas（2d）兼容性還不錯。webgl兼容性坑爹，移動平臺支持不好。

網頁效果請用CSS3；應用、游戲、圖表用canvas；如果你覺得展示數據的時候css3不夠自由，canvas太麻煩可以用svg。

css3

不是很熟悉animate.csslesscss還有一些用來制作css3動畫的工具，不過沒見到讓人滿意的……

canvas

cocos2d-html5canvasenginethree.jsfabricjs

svg

用的很少，這個勉強算一個？d3js

回答2：

我首先想到的是svg的兼容性比css3好，svg支持IE8+，css3和html5的部分屬性在ie8下不支持

其次，說css3像svg一樣可以結合dom，這有點抬舉它了，svg基于xml，它的結構很好，很適合修改和擴展，而如果用css3重寫就是html，語義上不對不說，結構也得靠工程師自己來設計和優化，擴展性和修改能力上遠不如svg。所以，復雜圖形上面，svg的優勢很明顯，而簡單的圖形，可以說css3跟svg差不多。

canvas的話，因為跟js結合更緊密，所以一些邏輯操作要比css3方便太多，比如用canvas逐幀寫動畫和游戲，css3實現的話會更加吃力一些。

其實css3我認為依然是對css的擴展，更多是從擴展樣式表現方面的考慮，從程序邏輯上來說，只能依靠模擬來實現，在這方面依附于js的canvas還是有比較大的優勢。

回答3：

canvas的操作更底層（使用WebGL的情況下） 效率更高 以后可能成為新的游戲平臺

回答4：

三者的應用場景不一樣.

css3除去文本效果,邊框,圓角,多背景,多列等等,應該說主要意義在動畫,過渡等效果上相比于以往css2.1做了較大的創新,這里我稍微對animation,transition,transform做了對比.

我這里寫了一篇有關svg對比canvas的文章,或許你可以借鑒借鑒.canvas作為一項H5的新技術,憑借高效且相比于SVG更簡單的特點,對于大部分的前端同學來說更熟悉.Canvas更是借著數據可視化迎來了很多人的喜愛.但是拋去瀏覽器,svg在許多其他場景干翻Canvas,因為資格老,而且Canvas推出的初衷只考慮在瀏覽器當中.不過瀏覽器當中,svg還是有一席之地的,比如我推薦一個svg icon庫Icomoon,自定義添加svg文件,然后只需添加相應class即可輕松創建新icon.避開svg的dom短板,可以說這樣的icon質量很高,可伸縮,對屏幕大小不感冒,可以說屏幕越大優勢越明顯.

綜合比較看來,css3的圖形部分主要意義在于'動畫2D3D過渡效果',為什么打引號,是因為真正的3D大頭其實在于難啃的WebGL.隨著H5的興起,瀏覽器的2D大頭在于Canvas.css3,svg,canvas暫時誰也不能淘汰誰,除非css3自己可以畫出更好的圖形,而不僅僅是帶來更好的動畫過渡效果;而svg(后臺是adobe和ms),canvas相比于css3(后兩者后臺應該算webkit系列)更偏重于靜態,矢量圖形,但是因為本質完全不一樣,各有各的優點,也是一樣的都無法被替代.

如果將來瀏覽器圖形這方面的標準能夠做得更統一,或許會有數量更少,優點更多的技術;但是目前無法做到.

回答5：

我 確實不知道怎么回答好 只是來逛逛 ，你們加油