Canvas与SVG

原文：前端绘图方式Canvas和SVG的区别

一、Canvas 和 SVG 简介

1.什么是Canvas？

• Canvas 是H5新出来的标签
• Canvas画布，利用JavaScript在网页绘制图像
• 在标签中给上宽高： 不用加单位
• 如果在css中给宽高 会对图像造成拉伸 （默认宽高300px*150px）
• 通过过去绘制工具 .getContext(“2d”) 来在画布中绘制图形

2.什么是SVG？

SVG 可缩放矢量图形（Scalable Vector Graphics），基于可扩展标记语言XML 出来的时间比较老

SVG 用来定义用于网格的基于矢量的图形

二、Canvas 和 SVG 区别

1. 绘制的图片格式不同

• Canvas 的工具getContext 绘制出来的图形或传入的图片都依赖分辨率，能够以 .png 和 .jpg格式保存存储图像，可以说是位图

• SVG 可以在H5中直接绘制，但绘制的是矢量图

由于位图依赖分辨率，矢量图不依赖分辨率，所以Canvas和SVG的图片格式的不同实际上是他们绘制出来的图片的格式不同造成的。

2. Canvas不支持事件处理器，SVG支持事件处理器

• Canvas 绘制的图像 都在Canvas这个画布里面，是Canvas的一部分，不能用js获取已经绘制好的图形元素。

如下：

image.png
image.png

在控制台中可以看到canvas标签里面是没有单独的长方形存在的。

Canvas就像动画，每次显示全部的一帧的内容，想改变里面某个元素的位置或者变化需要在下一帧中全部重新显示。

• SVG绘图时，每个图形都是以DOM节点的形式插入到页面中，可以用js或其他方法直接操作

如下：

image.png

效果：

image.png

可以看出svg 标签下面多了两个矩形的标签

下面我们来操作新出来的矩形标签：

给上rect标签id r1 和 r2

// 获取元素
var rect1 = document.getElementById(“r1”);
var rect2 = document.getElementById(“r2”);

// 改变元素的填充颜色：
rect1.style.fill = “yellow”;
rect2.style.fill = “pink”;

效果：

image.png

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

3. 适用范围不同

由于Canvas 和 SVG 的工作机制不同，Canvas是逐像素进行渲染的，一旦图形绘制完成，就不会继续被浏览器关注。而SVG是通过DOM操作来显示的。

所以Canvas的文本渲染能力弱，而SVG最适合带有大型渲染区域的应用程序，比如地图。
而Canvas 最适合有许多对象要被频繁重绘的图形密集型游戏。

而SVG由于DOM操作 在复杂度高的游戏应用中会减慢渲染速度。所以不适合在游戏应用。

Canvas适用场景
Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制
SVG适用场景
SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景