本文深入浅析浏览器中的SVG和canvas图表渲染技术，包括它们的区别和应用场景。同时，文章介绍了前端适配的基本概念，如物理像素、逻辑像素与分辨率的关系，探讨了页面适配在不同设备和分辨率下的重要性。
浅谈浏览器图表渲染及前端适配
一、关于浏览器图表渲染
前端绘制图表一般是借助数据可视化框架去完成，数据可视化是个很火的领域，如果在 Github 上搜索 chart 会发现有 7.9w 个结果，出名的Echarts, Highcharts,D3,AntV G2…等等。关于框架的选择不是今天讨论的重点，关键点在于其背后的技术基础。
Echarts.js是基于canvas的，而D3.js和Highcharts.js是基于SVG去做的。
尽管前端绘图技术有很多种，今天主要来说一下canvas和SVG，也是面试被问几率比较高的问题。
1、SVG
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。
这意味着 SVG DOM 中的每个元素都是可用的,图像在放大或改变尺寸的情况下其图形质量不会有所损失,不依赖分辨率，支持事件的绑定。
2、canvas
canvas是HTML5标准中的一个元素，javascript为其提供了一些绘图API，通过canvas生成的图像是栅格形式的，即像素图像。
这意味着canvas是逐像素进行渲染的，依赖分辨率，不支持事件处理器。
3、二者区别
Canvas
- html5的新标签
- 依赖分辨率
- 标量图
- 不支持事件处理器
- 弱的文本渲染能力
- 绘制图形通常是通过javascript来实现
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
- 历史相对久远
- 不依赖分辨率
- 矢量图
- 支持事件处理器
- 更多的是通过标签来实现
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度
- 不适合游戏应用
为了体会二者技术差异，做了一个小demo。
同样的柱状图，通过svg和canvas两种方式如何去实现：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- *svg柱状图实现 -->
<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" width="600" height="600" style="border: 1px solid;">
<!-- 坐标轴-->
<g stroke="#000" stroke-width="1">
<polyline points="50,50 50,500 550,500" fill="none" />
</g>
<!-- 单位 -->
<g font-size='20px'>
<text x="40" y="30">单位：m</text>
</g>
</svg>
最低0.47元/天 解锁文章
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
