有了css3之后,我们还需要canvas还有svg吗?

李惟
  • 2.1k

产生这个问题前,我先查询的是svg和canvas的区别,有一个根本的却别是:

svg可以当作xml,可以放大缩小,像html一样操作
而canvas则是一个实实在在画布,像swf那样,编辑起来不是很方便,但是效率高

从这里可以看出两者各有优劣,再后来我又看了CSS3,我发现CSS3结合了两者的长处:

  1. 可以结合DOM,和svg一样容易操作
  2. 渲染效率高,可以像canvas在dom上画出任意形状

那么我有这么几个问题:

  1. 有了css3之后,我们还需要svg还有canvas吗?
  2. 他们各自的有缺点是什么
  3. 什么场合适合用CSS3,什么场合适合用svg,什么场合适合canvas
  4. 目前这三者有什么知名的框架来便于操作、使用吗?
  5. 他们三者目前浏览器兼容情况如何,希望能提供参考页面或者图表说明
回复
阅读 19.2k
5 个回答
✓ 已被采纳
  1. CSS3在DOM节点多的情况下效率严重下降。
  2. CSS3的旋转比canvas(2d)要好。
  3. CSS3的文字渲染比canvas好。
  4. canvas可以在更底层操作。
  5. canvas支持webgl,可秒杀一切。
  6. canvas(2d)兼容性还不错。
  7. webgl兼容性坑爹,移动平台支持不好。

网页效果请用CSS3;应用、游戏、图表用canvas;如果你觉得展示数据的时候css3不够自由,canvas太麻烦可以用svg。

css3

不是很熟悉
animate.css
lesscss
还有一些用来制作css3动画的工具,不过没见到让人满意的……

canvas

cocos2d-html5
canvasengine
three.js
fabricjs

svg

用的很少,这个勉强算一个?
d3js

fishenal
  • 3.4k

我首先想到的是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还是有比较大的优势。

canvas的操作更底层(使用WebGL的情况下) 效率更高 以后可能成为新的游戏平台

南赐
  • 125

三者的应用场景不一样.

  • 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系列)更偏重于静态,矢量图形,但是因为本质完全不一样,各有各的优点,也是一样的都无法被替代.

  • 如果将来浏览器图形这方面的标准能够做得更统一,或许会有数量更少,优点更多的技术;但是目前无法做到.

宣传栏