计算机图形学中直线连接算法的Javascript实现

之前在想如何使用Javascript实现时钟的时候，被一个问题难到了：如何在像素级别绘制平滑的直线。

在网上查了一下，后来在图书馆里的一本关于计算机图形学的老书里发现了解决方案。针对这个问题，书上提供了三个算法，分别是简单DDA,对称DDA,Bresenham算法。

下面的是我使用简单DDA和Bresenham算法在浏览器上绘制Hello world的代码。

这里的Hello world 分别是定义了字母的一些”节点“，然后使用连线算法绘制出来的。

代码：

1. //构造画布，使用DOM动态生成表格
2. var _container = document.getElementById("container");
3. var pixs = new Array();
4. var canvasTbody = document.createElement("tbody");
5. var bgColor = "black";
6. var fontColor = "green";
7. var pix_size = "4px";
8. var pix_numbs = 81;
10. var temp_tr ;
11. var temp_td ;
12. var temp_pixrow;
14. for(var i = pix_numbs; i >= 0 ; i--){
15.     temp_tr = document.createElement("tr");
16.     temp_tr.style.height = pix_size;
17.     temp_pixrow = new Array();
18.     for(var j = 0; j <= pix_numbs ; j++){
19.         temp_td = document.createElement("td");
20.         temp_td.style.width=pix_size;
21.         temp_td.style.backgroundColor = bgColor;
22.         temp_tr.appendChild(temp_td);
23.         temp_pixrow[j] = temp_td;
24.     }
25.     canvasTbody.appendChild(temp_tr);
26.     pixs[i] = temp_pixrow;
27. }
28. var canvasTable = document.createElement("table");
29. canvasTable.style.backgroundColor = "black";
30. canvasTable.setAttribute("cellspacing","0");
31. canvasTable.setAttribute("cellpadding","0");
32. canvasTable.appendChild(canvasTbody);
33. _container.appendChild(canvasTable);
36. // 点 类，包含坐标信息，有绘制和比较操作
37. function point(_x,_y){
38.     this.x = _x;
39.     this.y = _y;
40. }
42. function _draw(){
43.     if(this.x > pix_numbs || this.y > pix_numbs){
44.         return;
45.     }
46.     pixs[this.y][this.x].style.backgroundColor = fontColor;
47. }
49. point.prototype.draw = _draw;
51. function _equal(_p){
52.     if(! _p instanceof point){
53.         throw new Error();
54.     }
55.     if(this.x == _p.x && this.y == _p.y){
56.         return true;
57.     }else{
58.         retu