前言

因为群里粉丝一直要求我写一篇可视化入门指南，今天他来了。其实说起前端可视化，大家所能想到的就是各种图表，大屏。这种看着贼炫酷，而笔者呢工作也一直从事3D前端开发工作，慢慢对图形产生了兴趣。但是呢一直做的是三维的东西，没搞过二维的。大概是2月前开始学习2D的一些东西，然后并写了一些文章，效果还不错。所以我就写一些经验之谈，大佬勿喷。我大概从4个方面去讲我是怎么学习的

可视化不得不掌握的数学基础
svg方面的学习
canvas方面的学习
可视化中不得不掌握的图形算法

读完本篇文章，你可以大概知道我该怎么去学，需要学什么？以及我推荐的一些学习资料和学习资源！

数学篇

提起数学很多程序员头疼哇，我写代码还要学可恶的数学，但是我很明确的告诉你——很重要，如果你想学可可视化的话，数学很重要，背后的几何意义更重要。读者一开始理解不深，导致很多东西理解不了，吃了很多亏哇！

向量

在二维空间或者三维空间中，是不是都有点的概念，只不过一个是二维的一个是三维的，假设，现在这个平面直角坐标系上有一个向量 v。向量 v 有两个含义：一是可以表示该坐标系下位于 (x, y) 处的一个点；二是可以表示从原点 (0,0) 到坐标 (x,y) 的一根线段。

我在写canvas的同时就喜欢用一个Point2d 类就是这个原理， canvas本身就是坐标系。画布上的点都可以用向量表示，原点在左上方。

向量加减法

一个向量可以用其他两个向量去表示，也可以用两个向量去做减法，我说个实际工作中经常用到的例子：如何让一个点在某一个方向延展多少长度呢？

这里其实就是用到了向量的加法， 首先这个方向肯定是是个单位向量 ，为什么是单位向量呢？？因为向量是有大小和方向的，而单位向量只有方向，长度为1 ，然后我们只要开始点加上这个方向向量 ✖️ 长度。就可以得到了。背后不就是向量加法的运用。我还是画图给大家展示下吧。

向量加法

如图：我要从A-B点方向是od 然后你可以乘以任何长度得到 OD 然后相加，是不是就可以得到B点了。一图胜千言！，减法大家可以自己去思考，同样的道理的

向量的叉乘和点乘

其实很多种实践，这里我就举一个例子哈，带你了解点乘。其实还有投影

向量点乘可以用来判断连个向量是否同一方向，我还是画图给大家讲解，不说太多理论，都是实战中经常用到的。

A向量和B向量之间的夹角是锐角所以是同向， B向量和C量之间的夹角是钝角所以是反向，因为点乘的数学公式就是两个向量的模长 × cosθ 。

叉乘

叉乘的几何意义也是非常重要的，可以算多边形的面积，计算出另一个向量垂直于这两个向量。还是开始画图：

X向量和 Y向量去做叉乘得到的向量Z 是 xy 平面的normal。

算面积：

叉乘的数学意义： A向量的模长 × B向量的模长 × sinθ 不就是平行四边形的高 H 所以可以用来算面积。

叉乘还可以用来判断三个点的方向

Corss 的几何叉积得到的是一个数值，只要判断当前数值是大于0 小于 0就好了，就知道这个三个点的方式是逆时针还是顺时针就好了。

顺时针还是逆时针

图中可以看到 OAB 和OA1B 的方向是不同，OA向量✖️ OB向量的值和 OA1 ✖️OB向量算出的来的值是相反的。公式我给大家列举下：

a.x * b.y - a.y * b.x

其实向量的点乘和叉乘非常的重要，大家一定要要好理解，后面的图形算法，很多也是基于这个去实现的。

矩阵

空间中图形的大部分变化都是可以通过矩阵去表示的，大概有下面几种类型：

平移矩阵
旋转矩阵
缩放矩阵
镜像矩阵
错切矩阵
投影矩阵

这里我给大家推荐的学习资源是B站的：

https://www.bilibili.com/video/BV1ib411t7YR?from=search&seid=15308763710996235630

线性代数的本质，看完你就能够明白了，包括上面的向量之间的变化。

镜像矩阵我推荐你看我这篇文章，我是求导了三维空间中任意平面的镜像矩阵的了，

求空间任意平面的镜像矩阵

我这里给大家简单的讲解下最简单的变化—— 平移矩阵

还是看下图吧:

平移矩阵

在这样的三维坐标系中从A点平移到B点 x变化了 2 y变化了0 z 变化了 2 对应矩阵的写法是什么呢：
$$
\begin{bmatrix}
1&0&0&2\
0&1&0&0\
0&0&1&2\
0&0&0&1\
\end{bmatrix}
×
\begin{bmatrix}
2\
0\
4\
1\
\end{bmatrix}

\begin{bmatrix}
4\
0\
6\
1\
\end{bmatrix}
$$

其实矩阵中每一行都有对应的矩阵，平移矩阵一般改变的第四列的前三个数字