SVG和Canvas绘图（一）

Posted 2023-03-15

参考技术A

栅格图形 ，也叫做点阵图，位图(bitmap)，像素图，图像是由像素构成的，像素的多少将决定图像的显示质量和文件大小，图像的分辨率越高，其显示越清晰，文件所占的空间也就越大。图像放大时会失真，可以看到整个图像是由很多像素组合而成的。

矢量图形 使用 XML 来描述二维图形和绘图程序，矢量图像在放大或改变尺寸的情况下其图形质量不会有所损失。

<canvas>和<svg>都是html5推荐使用的图形技术，Canvas基于像素，提供2D绘制函数，是一种HTML元素类型，依赖于HTML，只能通过脚本绘制图形；SVG为矢量，提供一系列图形元素（Rect, Path, Circle, Line …），还有完整的动画，事件机制，本身就能独立使用，也可以嵌入到HTML中，SVG很早就成为了国际标准，目前的稳定版本是1.1 – Scalable Vector Graphics (SVG) 1.1 (Second Edition) ，两者的主要特点见下面的表格：

SVG

Canvas

图形和图表
svg和Canvas都可以表现图表(如柱状图, 散点图, 饼图等等)，常用的图形图表库中，百度的echarts是基于Canvas实现的，D3是基于svg实现的。

xmlns属性可定义SVG 命名空间（如果将SVG内嵌在HTML页面中并作为该页面提供，则不需要xmlns属性）。

使用 <g> 元素，可以对多个元素进行分组

path元素是SVG基本形状中功能最强大的一个，它不仅能创建其他基本形状，还能创建更多其他形状。你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等。
path元素的形状是通过属性d来定义的，属性d的值是一个“命令+参数”的序列。

下面的命令可用于路径数据：（命令详情可查看 https://segmentfault.com/a/1190000005053782 ）

viewBox的四个参数分别代表：最小X轴数值；最小y轴数值；宽度；高度。
用于svg整体缩放

表示虚线描边。可选值为：none, <dasharray>, inherit. 其中，none表示不是虚线；<dasharray>为一个逗号或空格分隔的数值列表。表示各个虚线段的长度。可以是固定的长度值，也可以是百分比值；inherit表继承。

表示虚线的起始偏移。可选值为：<percentage>, <length>, inherit. 百分比值，长度值，继承。

如果stroke-dasharray值很大，超过了描边路径的总长度，加以css动画改变stroke-dashoffset值，就会出现一段时间内描边显示从无到有。