标签：canvas 区别 svg 渲染 SVG 图形库 图形 绘制

Canvas

1. canvas通过javascript来绘制2D图形。

2. canvas是逐个像素进行渲染。

3. 在canvas中，图形绘制完成后，它就不会继续得到浏览器的关注。如果位置、大小等发生变化，那么整个canvas场景也需要重新绘制，根据变化不同，会产生一定程度的重排或重绘。

4. canvas绘制的图片依赖分辨率，能够以.png .jpg格式保存存储图像

5. canvas不支持事件处理，所绘制的图形都在画布中，不能用js获取图形元素，canvas适用于对象要被频繁绘制的图形中，例如图形密集型游戏。

6. 典型的canvas图形库是echarts。

SVG

1.SVG是一种使用XML描述2D图形的语言。

2. SVG基于XML，通过生成DOM进行图形渲染。

3. 在SVG中，每个被绘制的图形均被视为对象，如果SVG对象的属性发生变化，浏览器能够自动重绘图形。

4. SVG绘制的图片不依赖分辨率，所绘制的图形属于矢量图。

5. SVG支持事件处理，每个图形都是以DOM节点的形式插入到页面中，可以用js或其他方法直接操作，适用于有大型渲染区域的应用程序，例如地图。还有设计用于高分辨率打印图像的程序，以及计算机辅助制图程序。

6. 典型的SVG图形库是highCharts

标签：canvas,区别,svg,渲染,SVG,图形库,图形,绘制
来源： https://www.cnblogs.com/masha2017/p/16181531.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。