欢迎各界计算机爱好者加入,弘扬极客精神!

Canvas和SVG的区别

0 喜欢 0 不喜欢
Canvas和SVG图形之间的区别是什么
问题关闭原因: enough answers
最新提问 9月 20, 2016 分类:其他 | 用户: 啊哈 (1,866 分)  
已关闭 12月 8, 2016 用户:Re

25 个回答

0 喜欢 0 不喜欢

Canvas

  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘

SVG

  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序(比如谷歌地图)
  • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
  • 不适合游戏应用
最新回答 9月 20, 2016 用户: amberzbx (4,616 分)  
0 喜欢 0 不喜欢

Canvas是使用JavaScript程序绘图(动态生成),SVG是使用XML文档描述来绘图。

从这点来看:SVG更适合用来做动态交互,而且SVG绘图很容易编辑,只需要增加或移除相应的元素就可以了。
同时SVG是基于矢量的,所有它能够很好的处理图形大小的改变。Canvas是基于位图的图像,它不能够改变大小,只能缩放显示;所以说Canvas更适合用来实现类似于Flash能做的事情(当然现在Canvas与Flash相比还有一些不够完善的地方)。
关于最后一点二者谁更有前途:从上面我们可以知道二者是有不同用途的,作为一个开发者,你应该做的是理解应用程序的具体需求并选择正确的技术来实现它。

 

最新回答 9月 20, 2016 用户: 离核大久保 (3,238 分)  
0 喜欢 0 不喜欢
最新回答 9月 20, 2016 用户: tenderness (3,894 分)  
0 喜欢 0 不喜欢
最新回答 9月 20, 2016 用户: BLACK-NET (2,004 分)  
0 喜欢 0 不喜欢

Canvas

  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘

SVG

  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序(比如谷歌地图)
  • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
  • 不适合游戏应用
最新回答 9月 21, 2016 用户: BLACK-NET (2,004 分)  
1 喜欢 0 不喜欢
最新回答 9月 21, 2016 用户: Stardust (3,892 分)  
1 喜欢 0 不喜欢
svg绘制出来的每一个图形的元素都是独立的DOM节点,能够方便的绑定事件或用来修改。canvas输出的是一整幅画布;
最新回答 9月 21, 2016 用户: TTT (4,338 分)  
1 喜欢 0 不喜欢
最新回答 9月 21, 2016 用户: 月影千姿 (2,020 分)  
2 喜欢 0 不喜欢
最新回答 9月 21, 2016 用户: 笑诸雄 (3,558 分)  
0 喜欢 0 不喜欢

区别一:
svg绘制出来的每一个图形的元素都是独立的DOM节点,能够方便的绑定事件或用来修改。canvas输出的是一整幅画布;

区别二:
svg输出的图形是矢量图形,后期可以修改参数来自由放大缩小,不会是真和锯齿。而canvas输出标量画布,就像一张图片一样,放大会失真或者锯齿。

最新回答 9月 21, 2016 用户: erg先生 (2,490 分)  
...