首页 > 开发 > CSS > 正文

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

2017-09-12 09:39:56  来源: 网友分享

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

解决方案

  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