用dom实现简单的图形库，恶搞

一般javascript图形库用vml实现画图，夏天的时候我突发奇想用dom做图形库，一个像素点用一个像素的单元格实现，关键不需要vml支持，可以实现跨浏览器，看似很完美，不过YY过后用脚指头想想也能想到它的效率如何的低。最后我还是固执的实现了一个出来，娱乐一下，哈哈，起码可以用来当浏览器Killer。

  1/**//*
  2**
  3** Drawing.js
  4**
  5** created by luoluo
  6**
  7** 2005-08-05
  8**
  9** 基础画图类库
 10**
 11*/
 12
 13//
 14// 点类
 15//
 16function Point(_x, _y) {
 17    this.x = _x;
 18    this.y = _y;
 19}
 20
 21//
 22// 画板类
 23//
 24function DrawingPannel(_parent, _width, _height, _backgroundColor) {
 25    this.parent = _parent;
 26    this.width = _width;
 27    this.height = _height;
 28    this.backgroundColor = _backgroundColor;
 29    this.foreColor = "#000000";
 30    this.curPoint = new Point(0, 0);
 31    
 32    //
 33    // 创建画板
 34    this.rootNode = document.createElement("TABLE");
 35    this.rootNode.border = 0;
 36    this.rootNode.cellSpacing = 0;
 37    this.rootNode.cellPadding = 0;
 38    this.rootNode.style.backgroundColor = this.backgroundColor;
 39    
 40    //
 41    // 初始化画板上的点阵
 42    var oNewTBODY = document.createElement("TBODY");
 43    var oNewTR;
 44    var oNewTD;
 45    
 46    for (var i = 0; i < this.height; i ++) {
 47        oNewTR = document.createElement("TR");
 48        
 49        for (var j = 0; j < this.width; j ++) {
 50            oNewTD = document.createElement("TD");
 51            oNewTD.height = 1;
 52            oNewTD.width = 1;
 53            oNewTR.appendChild(oNewTD);
 54        }
 55        
 56        oNewTBODY.appendChild(oNewTR);
 57    }
 58    
 59    this.rootNode.appendChild(oNewTBODY);
 60    this.parent.appendChild(this.rootNode);
 61    
 62    //
 63    // 设置起始点
 64    this.setPoint = function _setPoint(_x, _y) {
 65        if (_x > this.width || _y > this.height)
 66            throw this.constructor + "类的setPoint方法传入的坐标参数越界";
 67            
 68        this.curPoint.x = _x;
 69        this.curPoint.y = _y;
 70    }
 71    
 72    //
 73    // 设置前景色
 74    this.setForeColor = function _setForeColor(_color) {
 75        this.foreColor = _color;
 76    }
 77    
 78    //
 79    // 绘制直线
 80    this.lineTo = function _lineTo(_x, _y) {
 81        if (_x > this.width || _y > this.height)
 82            throw this.constructor + "类的lineTo方法传入的坐标参数越界";
 83            
 84        var x, y;
 85        var mi, ma;
 86        
 87        if (_x == this.curPoint.x) {
 88            //
 89            // 处理直线点斜公式的特殊情况:两点x坐标相同
 90            x = _x;
 91            
 92            mi = Math.min(this.curPoint.y, _y);
 93            ma = Math.max(this.curPoint.y, _y);
 94            
 95            for (y = mi; y < ma; y ++) {
 96                this.rootNode.tBodies[0].rows[y].cells[x].style.backgroundColor = this.foreColor;
 97            }
 98        } else if (_y == this.curPoint.y) {
 99            //
100            // 处理两点y坐标相同的情况
101            y = _y;
102            
103            mi = Math.min(this.curPoint.x, _x);
104            ma = Math.max(this.curPoint.x, _x);
105            
106            for (x = mi; x < ma; x ++) {
107                this.rootNode.tBodies[0].rows[y].cells[x].style.backgroundColor = this.foreColor;
108            }
109            
110        } else {
111            //
112            // 普通情况
113            if (this.curPoint.x < _x) {
114                for (x = this.curPoint.x; x < _x; x ++) {
115                    //
116                    // 根据直线的点斜公式计算y坐标
117                    y = (parseFloat((_y - this.curPoint.y).toString()) / (_x - this.curPoint.x)) * (x - this.curPoint.x) + this.curPoint.y;
118
119                    //
120                    // 根据y坐标的小数部分大小取整
121                    y = (y - Math.floor(y)) < (Math.ceil(y) - y) ? Math.floor(y) : Math.ceil(y); 
122                    
123                    this.rootNode.tBodies[0].rows[y].cells[x].style.backgroundColor = this.foreColor;
124                }
125            } else {
126                for (x = this.curPoint.x; x > _x; x --) {
127                    //
128                    // 根据直线的点斜公式计算y坐标
129                    y = (parseFloat((_y - this.curPoint.y).toString()) / (_x - this.curPoint.x)) * (x - this.curPoint.x) + this.curPoint.y;
130
131                    //
132                    // 根据y坐标的小数部分大小取整
133                    y = (y - Math.floor(y)) < (Math.ceil(y) - y) ? Math.floor(y) : Math.ceil(y); 
134                    
135                    this.rootNode.tBodies[0].rows[y].cells[x].style.backgroundColor = this.foreColor;
136                }            
137            }
138        }
139    }
140    
141    //
142    // 绘制方形
143    function drawRect(_x, _y, _backgroundColor) {
144        
145    }
146    
147    //
148    // 绘制圆形
149    function drawCircle(_r, _backgroundColor) {
150    
151    }
152}

 1<html>
 2<head>
 3<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 4<title>画图例子</title>
 5<script language="javascript" src="Drawing.js"></script>
 6</head>
 7
 8<body>
 9<div id="pannel"></div>
10<script language="javascript">
11<!--
12var dp = new DrawingPannel(document.getElementById("pannel"), 300, 200, "#CCCCCC");
13try {
14    dp.setPoint(150, 100);
15    dp.setForeColor("red");
16    dp.lineTo(150, 190);
17    dp.setForeColor("yellow");
18    dp.lineTo(20, 100);
19    dp.setForeColor("blue");
20    dp.lineTo(1, 1);
21} catch (ex) {
22    alert(ex);
23}
24-->
25</script>
26</body>
27</html>
28