canvas 与svg的区别

canvas

通过Javascript来绘制2D图形.
是逐像素进行渲染的。
其位置发生改变，会重新进行绘制。

canvas的使用步骤：

1. 获取元素对应的DOM对象，这是一个Canvas对象；
2. 调用Canvas对象的getContext()方法，得到一个CanvasRenderingContext2D对象；
3. 调用CanvasRenderingContext2D对象进行绘图。

特点：

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

SVG

svg是指可伸缩矢量图形 (Scalable Vector Graphics)，是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。

 <svg width="100%" height="100%"  >
        <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" />
    </svg>

区别

canvas画图基于像素点，是位图，如果进行放大或缩小会失真
svg基于图形，用html标签描绘形状，放大缩小不会失真

canvas需要js中绘制
svg在html中绘制

canvas无法对已经绘制的图像进行修改、操作
svg可以获取到标签进行操作

Canvas 适用于位图，高数据量高绘制频率（帧率）的场景，如动画、游戏；
SVG 适用于矢量图，低数据量低绘制频率的场景，如图形、图表；