HTML5-Canvas与SVG

分段概叙

• 什么是Canvas，SVG ？
• Canvas，SVG的作用是什么 ？
• Canvas，SVG的区别有哪些 ？
• Canvas，SVG的第三方插件（英，中）。

解一：什么是Canvas，SVG ？
Canvas

• 是html5中通过脚本来完成2D图形的绘制的元素。要想进行绘制你得在脚本中获取画笔（ getContext(“2d”) ）才能进行下步绘制。
• 主要以路径，矩形，圆，线，添加图片等 API 操作进行图像绘制，并且可实现不一般的动画效果
• 主流浏览器最新版都支持

SVG

• SVG是可伸缩的矢量图形，放大缩小都不会对图形的质量有所损失
• SVG 用于定义用于网络的基于矢量的图形
• SVG 使用 XML 格式定义图形
• SVG是万维网联盟的标准
• Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持内联SVG。

解二：Canvas，SVG的作用是什么 ？
Canvas

• 现如今个人看来用于一些小游戏以及数据呈现

SVG

SVG的应用场景https://blog.csdn.net/load_life/article/details/8134586

解散三：Canvas，SVG的区别有哪些 ？

• SVG使用XML描述2D图形的语言，而Canvas则是通过js来绘制2D图形。

• SVG基于XML，则意味着SVG DOM中的每个元素都可附加js事件处理，Canvas只能对自身使用js事件处理。

• 在SVG中，每个被绘制的图形均被视为对象，如果SVG的属性发生变化浏览器则会自动重现图形。
  Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
  例子：在Canvas中绘制一个有动画效果的图，在它每进行次动作，必须将上次动画效果清除，不然会重复叠加，而SVG则没有。

• 比较两者的不同

Canvas	SVG
依赖分辨率	不依赖分辨率
不支持事件处理	支持时间处理
弱的文本渲染能力	使用大型渲染( 用于地图，logo设计)
能够以.png或.jpg格式保存图像	渲染速度较慢
适合游戏开发	不适合游戏应用

解四：Canvas，SVG的第三方插件（英，中）
Canvas

• 中：www.echartsjs.com
• 英：www.chartjs.org

SVG

• https://two.js.org/