49 lines
2.8 KiB
Markdown
49 lines
2.8 KiB
Markdown
|
---
|
|||
|
|
title: 浏览器绘图原理
|
|||
|
|
date: 2021-03-26
|
|||
|
|
author: ac
|
|||
|
|
tags:
|
|||
|
|
- Canvas
|
|||
|
|
- SVG
|
|||
|
|
categories:
|
|||
|
|
- 可视化
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 浏览器绘图原理
|
|||
|
|
|
|||
|
|
基于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 适用于矢量图，低数据量低绘制频率的场景，如图形、图表
|
|||
|
|
|
|||
|
|
> 位图亦称为[点阵图像](https://baike.baidu.com/item/点阵图像)或栅格图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成[图样](https://baike.baidu.com/item/图样/63558)。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 参考文章
|
|||
|
|
|
|||
|
|
[1] 浏览器绘图的基本原理 https://blog.csdn.net/ccav4137/article/details/83776717
|