“这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战”
本文标题：Canvas Vs SVG的不同之处｜ 8月更文挑战 两者允许在浏览器中创建图形，但是它们在根本上是不同的
canvas
- 通过Javascript来绘制2D图形
- 是逐像素进行渲染的。
- 一旦图形被绘制完成，它就不会被浏览器所关注，如果其位置发生改变，会重新进行绘制。
canvas的使用步骤：
- 获取元素对应的DOM对象，这是一个Canvas对象；
- 调用Canvas对象的getContext()方法，得到一个CanvasRenderingContext2D对象；
- 调用CanvasRenderingContext2D对象进行绘图。
特点：
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
WebGl
-
WebGL是OpenGL的版本，OpenGL是3D引擎.WebGL可以帮助用户在Web浏览器中执行3D操作。
-
如果用户希望从初始级别（或开始）理解和编写代码，则Canvas API更加容易学习和理解。可以说，对Canvas布的理解需要最少的数学理解，而WebGL需要具有一定数学知识的人。
-
用于WebGL的本机3D API速度更快，并且具有更多功能，例如渲染管道，代码可访问性和更快的执行速度。
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 适用于矢量图，低数据量低绘制频率的场景，如图形、图表；
