本文介绍如何基于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页；