問題描述

產(chǎn)生這個(gè)問題前，我先查詢的是svg和canvas的區(qū)別，有一個(gè)根本的卻別是：

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

從這里可以看出兩者各有優(yōu)劣，再后來我又看了CSS3，我發(fā)現(xiàn)CSS3結(jié)合了兩者的長處：

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

那么我有這么幾個(gè)問題：

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

問題解答

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

網(wǎng)頁效果請(qǐng)用CSS3；應(yīng)用、游戲、圖表用canvas；如果你覺得展示數(shù)據(jù)的時(shí)候css3不夠自由，canvas太麻煩可以用svg。

css3

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

canvas

cocos2d-html5canvasenginethree.jsfabricjs

svg

用的很少，這個(gè)勉強(qiáng)算一個(gè)？d3js

回答2：

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

其次，說css3像svg一樣可以結(jié)合dom，這有點(diǎn)抬舉它了，svg基于xml，它的結(jié)構(gòu)很好，很適合修改和擴(kuò)展，而如果用css3重寫就是html，語義上不對(duì)不說，結(jié)構(gòu)也得靠工程師自己來設(shè)計(jì)和優(yōu)化，擴(kuò)展性和修改能力上遠(yuǎn)不如svg。所以，復(fù)雜圖形上面，svg的優(yōu)勢(shì)很明顯，而簡單的圖形，可以說css3跟svg差不多。

canvas的話，因?yàn)楦鷍s結(jié)合更緊密，所以一些邏輯操作要比css3方便太多，比如用canvas逐幀寫動(dòng)畫和游戲，css3實(shí)現(xiàn)的話會(huì)更加吃力一些。

其實(shí)css3我認(rèn)為依然是對(duì)css的擴(kuò)展，更多是從擴(kuò)展樣式表現(xiàn)方面的考慮，從程序邏輯上來說，只能依靠模擬來實(shí)現(xiàn)，在這方面依附于js的canvas還是有比較大的優(yōu)勢(shì)。

回答3：

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

回答4：

三者的應(yīng)用場(chǎng)景不一樣.

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

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

綜合比較看來,css3的圖形部分主要意義在于'動(dòng)畫2D3D過渡效果',為什么打引號(hào),是因?yàn)檎嬲?D大頭其實(shí)在于難啃的WebGL.隨著H5的興起,瀏覽器的2D大頭在于Canvas.css3,svg,canvas暫時(shí)誰也不能淘汰誰,除非css3自己可以畫出更好的圖形,而不僅僅是帶來更好的動(dòng)畫過渡效果;而svg(后臺(tái)是adobe和ms),canvas相比于css3(后兩者后臺(tái)應(yīng)該算webkit系列)更偏重于靜態(tài),矢量圖形,但是因?yàn)楸举|(zhì)完全不一樣,各有各的優(yōu)點(diǎn),也是一樣的都無法被替代.

如果將來瀏覽器圖形這方面的標(biāo)準(zhǔn)能夠做得更統(tǒng)一,或許會(huì)有數(shù)量更少,優(yōu)點(diǎn)更多的技術(shù);但是目前無法做到.

回答5：

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