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


产生这个问题前,我先查询的是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. 他们三者目前浏览器兼容情况如何,希望能提供参考页面或者图表说明

css3 canvas 前端 svg

约翰史密斯 11 years, 11 months ago
  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

yuuka answered 11 years, 11 months ago

Your Answer