# 浏览器绘图原理
基于HTML和JavaScript的浏览器绘图方式，依赖于各个浏览器内部所提供的图形引擎。
但由于不同浏览器所支持的网络图形标准不尽相同，给软件的兼容性造成了很大的困难。
目前主流的网络图形标准为：SVG、Canvas、VML
SVG：SVG（ Scalable Vector Graphics）可缩放矢量图形，使用XML格式定义图像。每个图形都可以在HTML页面上找到相应的标签，是基于对象模型的。这更有利于用户交互，事件绑定等。
SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失，具有高保真的特性。Canvas：通过JavaScript和HTML的Canvas元素来绘制图形的方式。每一个 canvas 元素都有一个上下文，在其中可以绘制任意图形。是基于像素，逐像素进行渲染的。当其位置发生改变，会重新进行绘制。依赖于分辨率，缩放会失真，不支持事件处理器。
VML：IE 支持的VML，VML是微软开发并在 IE 5.0 以上版本提供支持的基于 XML 的一种标记语言，使用 VML 描述的矢量图形，由 shape 和 group 两个基本元素定义，shape 描述了一个矢量图形元素，而 shape 则将这些图形元素集合在一起，从而使其可以作为一个整体被处理。由于使用简单的文本来表示图像，因而 VML 可用很少的字节来表示相对复杂的图像。
<canvas>最早由Apple引入WebKit，用于Mac OS X 的 Dashboard，随后被各个浏览器实现。如今，除一些过时的浏览器不支持<canvas>元素外，所有的新版本主流浏览器都支持它。目前SVG在Firefox、Opera、Webkit浏览器、IE等浏览器中已经部分实现。
SVG和Canvas的区别：
- canvas画图基于像素点，是位图，如果进行放大或缩小会失真； svg 基于图形，用 html 标签描绘形状，放大缩小不会失真；
- canvas 需要使用
js绘制； svg 在html中绘制； - canvas 无法对已经绘制的图像进行修改、操作； svg 可以获取到标签进行操作；
- Canvas 适用于位图，高数据量高绘制频率（帧率）的场景，如动画、游戏； SVG 适用于矢量图，低数据量低绘制频率的场景，如图形、图表
位图亦称为点阵图像 (opens new window)或栅格图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成图样 (opens new window)。
# 参考文章
[1] 浏览器绘图的基本原理 https://blog.csdn.net/ccav4137/article/details/83776717