SVG
参考：https://www.w3school.com.cn/svg/svg_intro.asp 或 https://www.w3cschool.cn/svg/svg-tutorial.html（推荐） 或 https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/svg
一、概念：这个就细说了，做前端基本都清楚。
1、svg内的标签一般都是自闭标签。
二、SVG 的 API：（H5页面的简单画图，推荐还是使用SVG。）
a、svg入门详解（实例篇）：https://www.jianshu.com/p/8ddb4ba85594
b、svg的API就是一些属性，js操作的API就是和DOM一样，操作相应元素的属性。
c、svg的基本图形和属性：https://www.jianshu.com/p/2ddd369ddd95 或 http://www.ptbird.cn/svt-base-shape.html
1、预定义的形状元素：
- 矩形 <rect>
- 圆形 <circle>
- 椭圆 <ellipse>
- 线 <line>
- 折线 <polyline>
- 多边形 <polygon>
- 路径 <path>
- 文本 <text>
2、自定义的 形状一般都是通过 <path>标签来实现的。
3、形状标签上的属性（描述属性、css样式属性）： 具体是API参考 https://www.w3cschool.cn/svg/svg-reference.html（推荐） 或 https://www.h5course.com/plus/view.php?aid=252 或 https://www.nhooo.com/svg/svg-fill.html（属性手册）
a、 width 和 height 属性可定义矩形的高度和宽度。
b、style 属性用来定义 CSS 属性 。【好像svg的大部分属性 放在style里面 也是有效的，反过来也是一样。 https://blog.csdn.net/auragreen/article/details/52212428】
css中的属性如下：（参考文档上说的不多，需要直接记录下）
fill 属性：定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
stroke-width 属性：定义矩形边框的宽度【即border的宽度】
stroke 属性：定义矩形边框的颜色
fill-opacity 属性：定义填充颜色透明度（合法的范围是：0 - 1）
stroke-opacity 属性：定义笔触颜色的透明度（合法的范围是：0 - 1）
注意：style中的属性直接拿出来作为标签的属性也是有效的。如：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-1;stroke:rgb(0,0,0)" /> </svg> <!-- 效果和下面的是一样的 --> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect fill="rgb(0,0,255)" width="300" height="100" style="stroke-1;stroke:rgb(0,0,0)" /> </svg>
c、x 属性：定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
d、y 属性：定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
e、rx 和 ry 属性可使矩形产生圆角。
f、r属性：定义圆的半径
注意：描述属性 可以 被 样式属性覆盖
4、滤镜、渐变、模糊 就不讲了，直接看文档。
5、js操作 svg ：https://www.cnblogs.com/fanlinqiang/p/11826143.html
a、如果 SVG 代码直接写在 HTML 网页之中，它就成为网页 DOM 的一部分，可以直接用 DOM 操作。
b、如果 使用embed、object插入的svg文件，其有完全属于自己的document：
此时，再想拿到svg, 则需要使用：getSVGDocument()；
三、常用属性：
1、通用属性：
a、Stroke 相关属性：https://www.runoob.com/svg/svg-stroke.html
说明：Stroke属性定义一条线，文本或元素轮廓颜色（stroke相关的属性，是设置 线、文本、轮廓 的样式）
stroke：线的颜色
stroke-width：线的厚度
stroke-linecap：不同类型的开放路径的终结
stroke-dasharray：用于创建虚线（里面的值对应的是 实现 或 虚线的 长度。所以圆也是一样，设置的是弧长）
b、fill 相关属性：https://www.nhooo.com/svg/svg-fill.html
说明：fill 设置的是填充区域的属性
fill：属性 定义了其轮廓内的形状的颜色（即 填充颜色）
fill-opacity：填充颜色的不透明度
fill-rule：决定的复杂形状的填充方式（简单图形用不到）
c、transform 以及其它的通用属性 和 css的都一样。
四、辅助工具：
1、SVG实现的圆环旋转效果
参考：http://www.softwhy.com/article-6472-1.html
2、SVG中的图形可以通过 transform="matrix(0,-1,1,0,0,440)"进行旋转。
3、svg代码可以单独放在一个后缀名为 .svg 的文件中保存起来。这个文件就是矢量图片文件。
这点用来制作一些矢量图会非常方便，不需要把这个svg代码放在html了（比较乱），可以单独在一个svg文件中。代码逻辑会清晰、干净许多。(占位代替图会经常使用svg制作)
SVG标签学习（SVG标签在W3C中是排在xml中学习的）： http://www.w3school.com.cn/svg/svg_circle.asp
SVG在线制作编辑预览工具：https://www.bejson.com/ui/svg_editor/
SVG WEB在线编辑器 ： http://www.86y.org/demo/svg/（这个不能把图片保存为svg文件） 或 http://www.zuohaotu.com/svg/（推荐，这个比较完美）
canvas
1、canvas标签在使用的时候，内部就会创建一个画图的对象（getContext("2d") 或getContext("3d")）【这个对象包含了画图所需要的所有工具集，如画笔】。挂载在这个canvasDOM对象上。
js 可以直接获取这个canvas标签 对象对应的画图对象ctx。
2、通过这个ctx对象，描述画什么样的图画（ctx对象可以理解成是一个画笔）。
3、使用stroke() 或者 fill() 方法把ctx描述的图画呈现出来。
注：上面的2、3步骤可以合并在一起，步骤2的描述可以作为步骤3（步骤3API的变形）的参数。如，fillText(text,x,y) 或 strokeText(text,x,y)。
总结：canvas在js使用分3个步骤：获取canvas标签的DOM对象，从DOM对象中取出画图对象ctx；使用画图对象ctx描述所画的图像；将描述的图像呈现从来。
画图对象ctx常用的API：https://www.cnblogs.com/liugang-vip/p/5360283.html