JavaScript实现软件光栅化渲染器-如何画直线

在计算机屏幕上画直线碰到的第一个问题是：由于屏幕是一个由整数坐标表示的2D网格，因此要在屏幕上显示类似 (20.5, 30.3) 的点几乎是不可能的，只能采用近似值，例如，把点显示为 (20, 30) 。或者采用较高级的算法，通过带权像素绘制出围绕 (20.5, 30.3) 、具有不同像素浓度的一系列点来代替这一点。

光栅化基础

把像素以最接近实际直线的位置从点 P0 到 P1 进行填充，这个过程称为光栅化。要理解光栅化的原理，先来温习一下斜率的定义。

直线的斜率同直线与x轴的夹角有关。如果一条直线的斜率为0，则该直线为水平直线；如果斜率为无穷大，则直线为垂直直线；如果斜率为1，则为45度的对角斜线。

斜率的定义为单位前进距离的上升量，数学表达式为：

斜率(m) = 上升/下降 = y方向的改变/x方向的改变 = dy/dx = (y2-y1)/(x2-x1)

例如：一条直线通过点 P0(1, 2) 和点 P1(5, 22)，则该直线的斜率m = (22-2)/(5-1) = 5.0。那么，斜率5.0到底意味着什么呢？它意味着x坐标每增加1.0个单位，y坐标就相应增加5.0个单位。这就是光栅化算法的基础。所以，画一条直线的大致流程是：1、计算斜率m；2、画点(x, y)；3、在x方向每前进1.0个单位，就在y方向相应前进m个单位，把这两个值加到(x, y)上；4、重复2-4步，直到完成。下图给出了点P0（1，2）到点P1（5，22）绘制的示意图。