本文介绍如何基于web实现鼠标绘制一个三角形，三角形可以由三个点来表示，只要绘制两两之间的直线段就可以画出三角形了。

假设我们已经实现了draw_line(p0, p1)方法，这个方法在点p0和p1之间画线，其中点包含x、y坐标以及点的颜色属性。如果p0和p1点的颜色相同，则画出的直线是单色的，和p0、p1的颜色相同；如果p0和p1点的颜色不同，则画出的直线是p0点颜色逐渐过渡到p1点颜色的渐变直线段。由于之前已经实现过Bresenham画线，实现这个方法已经不是问题了。

接下来结合鼠标操作来实现画三角形，通过监听鼠标点击、鼠标移动事件来获取鼠标位置，通过变量i记录鼠标点击的次数来确定三角形的第一个点，下面的伪代码可以表示鼠标画三角形的算法：

// objects存放历史三角形
objects = [];
i = 0;
canvas.onclick = function(event) {
  // 鼠标点击后，监听鼠标移动事件，实时跟踪鼠标位置作为下一个参考点
  canvas.addEventListener("mousemove", mousemoveHandler);
  if (i == 0) {
    // 鼠标第一次点击，当前鼠标位置为三角形的第一个点，点的颜色为red
    p0 = (event.clientX, event.clientY, red);
    i += 1;
  } else (i == 1) {
    // 鼠标第二次点击，当前鼠标位置为三角形第二个点，点的颜色为green
    p1 = (event.clientX, event.clientY, green);
    i += 1;
  } else (i == 2) {
    // 鼠标第三次点击，当前鼠标位置为三角形第三个点，点的颜色为blue
    p2 = (event.clientX, event.clientY, blue);
    // 画出三角形
    draw_line(p0, p1);
    draw_line(p1, p2);
    draw_line(p0, p2);
    // 确定的三角形存放到objects中
    objects.push([p0, p1, p2])
    // 三角形绘制完成，重置变量i，重新开始新的三角形
    i = 0
    // 不再监听鼠标移动事件
    canvas.removeEventListener("mousemove", mousemoveHandler);
  }
}

function mousemoveHandler(event) {
  // 首先清空画布
  clearCanvas();
  if (i == 1) {
    //三角形已经确定了第一个点，鼠标实时位置作为临时第二个点p1
    p1_tmp = (event.clientX, event.clientY, green);
    // 画出p0和p1_tmp之间的线
    draw_line(p0, p1_tmp);
  } (i == 2) {
	//三角形已经确定了第二个点，鼠标实时位置作为临时第三个点p2
    p2_tmp = (event.clientX, event.clientY, blue);
    // 画出临时三角形
    draw_line(p0, p1);
    draw_line(p1, p2_tmp);
    draw_line(p0, p2_tmp);
  }
  // 绘制历史三角形
  for t in objects:
    p0, p1, p2 = t[0], t[1], t[2];
    draw_line(p0, p1);
    draw_line(p1, p2);
    draw_line(p0, p2);
}

参考文献

[1] 《计算机图形学--理论与实践项目化教程》孔令德著，第23页；