meface/docs/article/visual/index.md

title	date	author	tags	categories
浏览器绘图原理	2021-03-26	ac	Canvas SVG	可视化

浏览器绘图原理

基于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的区别：

1. canvas画图基于像素点，是位图，如果进行放大或缩小会失真； svg 基于图形，用 html 标签描绘形状，放大缩小不会失真；
2. canvas 需要使用js绘制； svg 在html中绘制；
3. canvas 无法对已经绘制的图像进行修改、操作； svg 可以获取到标签进行操作；
4. Canvas 适用于位图，高数据量高绘制频率（帧率）的场景，如动画、游戏； SVG 适用于矢量图，低数据量低绘制频率的场景，如图形、图表

位图亦称为点阵图像或栅格图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成图样。

参考文章

[1] 浏览器绘图的基本原理 https://blog.csdn.net/ccav4137/article/details/83776717