适用于HTML5浏览器的SVG或Canvas



如果最低浏览器支持IE9、Chrome 16、FF 13、Safari 5.1,那么用HTML/JavaScript创建图形的最佳方法是什么;歌剧10?SVG还是Canvas
谷歌图表?

经过https://stackoverflow.com/a/1651167/138772和http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/:

您应该将Canvas用于:

  • 交互式图像编辑:裁剪、调整大小、滤镜(比如去除红眼、深褐色、着色等)
  • 生成光栅图形:数据可视化、数据图、渲染分形、函数图
  • 图像分析:读取像素以收集直方图、颜色使用和其他任何你能想象到的数据
  • 渲染游戏图形,如精灵和背景

您应该将SVG用于:

  • 独立于分辨率的Web应用程序用户界面
  • 高度交互式的动画用户界面
  • 数据图表和绘图
  • 矢量图像编辑

因此,基本上,如果你想拥有漂亮的矢量图并能够通过DOM操作它们,请使用SVG,但如果你只想绘制它们而不需要矢量化(你可能会设置它,使其能够根据页面/窗口大小进行缩放)或DOM使用,请使用Canvas。不过,我个人还是推荐SVG,因为我喜欢矢量图形。

最新更新