WebGL是比较底层的图形库，它只能画点、线和三角形，本文介绍怎么样使用WebGL画拥有线宽属性的直线，近期我正在开发一款基于Web的画图软件，发现要实现基本的绘制直线并不是那么简单，今天就先从相对简单的画一条带线宽的直线开始。

假如要绘制下图所示的一条p0到p1两点的直线，线宽为w，可以使用两个三角形124、243的组合来表示这条直线。画图工具中直线的起点和终点往往是读取鼠标的位置得到的，也就是p0和p1的坐标是已知的，接下来就是通过p0、p1和线宽w得到1、2、3、4这四个点的坐标。从示意图中可以看出，p0、p1沿直线垂直方向向上平移w/2距离就可以得到1、2点，反向平移w/2距离就可以得到3、4点。

我们再整理下思路：

通过鼠标交互等方式得到直线的起点和终点坐标p0、p1；叉积是计算垂直向量的普遍方法，计算向量p0->p1的法向量，即垂直p0->p1的向量。二维向量求法线非常简单，(x, y)的法向量为(-y, x)，为方便后续平移操作，将法向量标准化为单位向量；通过平移变换将p0、p1沿步骤2得到法向量正向平移w/2得到点1、2，沿法向量反向平移w/2得到点3、4。平移变换矩阵：tx、ty表示x、y方向的位移量

将1、2、3、4四个顶点坐标写入WebGL顶点坐标缓冲区，另外通过索引[0, 1, 3, 1, 2, 3]来表示两个三角形的顶点序号写入WebGL索引缓冲区，调用gl.drawElements绘制出带线宽的直线。如果你对WebGL绘制基本的三角形还不了解，推荐阅读《WebGL编程指南》这本书，这本书写的通俗易懂，非常适合WebGL入门，也可以翻阅我写的其他WebGL主题的文章。

通过适当的封装，我使用以上的画线方法绘制了三角形和矩形，显然折线处的空隙不是希望的样子，画线遇到的问题才刚刚开始，修复折线空隙的方法留作后续的文章介绍。

参考文献

[1]. https://sudonull.com/post/69577-Drawing-thick-lines-in-WebGL