javascript 简单图形库

 

< html >
< head >
< title > Tetris </ title >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< style  type ="text/css" > ...
 html, body{...}{margin:0px;}
 #test{...}{
  position:absolute; left:500px; top:50px;
  width:10px; height:1px;
  font-size:1px;
  background:#FF0000;
  padding:0px;margin:0px;
  overflow:hidden;
 };
 .line{...}{
  position:absolute; overflow:hidden;font-size:1px; z-index:10;
 }
</ style >
< script  type ="text/javascript" > ...
 //Javascript 简单图形库
 //名称：EasyDraw
 //版本：v1.0
 //作者：freewind
 //Email:freewind22@163.com
 //说明：兼容IE6.0 和 FF
 
 function EasyDraw()...{
  this.out = document.createElement("div");
  this.out.style.position = "relative";
  //原点坐标;
  this.setOrigin(0, 0);
  
  document.body.appendChild(this.out);
  //
  this.size = 1;
  this.color = "#000090";
  //
  this.x = 0;
  this.y = 0;
  
 }
 EasyDraw.prototype = ...{
  setOrigin : function(x, y)...{
   this.originX = x;
   this.originY = y;
   this.out.style.left = this.originX + "px";
   this.out.style.top = this.originY + "px";
  },
  //添加HTML
  _inserthtml : function(obj, html)...{
   if(obj.insertAdjacentHTML)...{
    obj.insertAdjacentHTML("beforeEnd", html);
   }else...{
    var range = obj.ownerDocument.createRange();
    if(obj.lastChild)...{
                    range.setStartAfter(obj.lastChild);
                    frag = range.createContextualFragment(html);
                    obj.appendChild(frag);
                }else...{
                   obj.innerHTML += html;
                }
   }
  },
  _gethtml : function(x, y, wid, hei)...{
   var fillcolor = "", strResult;
   if(arguments.length > 4) 
    fillcolor = arguments[4];
   if(fillcolor == "")
   ...{
    //线
    if (wid==1 || hei == 1)...{
     strResult = "<div style='overflow:hidden;position:absolute;font-size:1px;left:" + x + "px;top:" + y + "px;width:" + wid + "px;height:" + hei + "px;background: " + this.color + ";'></div>";
    }else...{ //矩形
     strResult = "<div style='overflow:hidden;position:absolute;font-size:1px;left:" + x + "px;top:" + y + "px;width:" + wid + "px;height:" + hei + "px;border:" + this.size + "px solid " + this.color + ";'></div>"; 
    }
   }
   else...{ //fill
    strResult = "<div style='overflow:hidden;position:absolute;font-size:1px;left:" + x + "px;top:" + y + "px;width:" + wid + "px;height:" + hei + "px;border:" + this.size + "px solid " + this.color + ";background:"+ fillcolor+"'></div>";
   } 
   return strResult;
  },
  //设置线的大小
  setsize : function(size)...{
   this.size = size;
  },
  //设置线的颜色
  setcolor : function(color)...{
   this.color = color;
  },
  //画点
  setpixel : function(x, y)...{
   this._line(x, y, this.size, this.size);
  },
  dot : function(x, y)...{this.setpixel(x, y);},
  //画直线
  _line : function(x, y, wid, hei)...{
   this._inserthtml(this.out, this._gethtml(x, y, wid, hei));
  },
  //画直线
  _line2 : function(obj, x, y, wid, hei)...{
   obj.innerHTML += this._gethtml(x, y, wid, hei);
  },
  //画线 起始坐标x1, y1, 结束坐标 x2, y2
  line : function(x1, y1, x2, y2)...{
   var tmp;
   if(x1 > x2 )...{
    tmp = x1;
    x1 = x2;
    x2 = tmp;
   }
   if(y1 > y2)...{
    tmp = y1;
    y1 = y2;
    y2 = tmp;
   }
   if(x1 == x2)...{ // |
    this._line(x1, y1, this.size, y2-y1 );
   }else if(y1 == y2)...{ // --
    this._line(x1, y1, x2-x1, this.size);
   }else...{ //  or /
    var n = (x2-x1) / (y2-y1);
    var newDoc = document.createDocumentFragment();
    newDoc.innerHTML = "";
    if(n >= 1)...{
     var diff = x2 - x1;
     for(var i=0; i<diff; i++)...{
      this._line2(newDoc, x1 + i, y1 + parseInt(i/n), this.size, this.size);
     } 
    }else...{
     var diff = y2 - y1;
     for(var i=0; i<diff; i++)...{
      this._line2(newDoc, x1 + parseInt(i*n), y1 + i, this.size, this.size);
     }
    }
    this._inserthtml(this.out, newDoc.innerHTML);
   }//end of if 
  },
  //移动光标
  moveTo : function(x, y)...{
   this.x = x;
   this.y = y;
  },
  //从开始光标画线
  lineTo : function(x, y)...{
   this.line(this.x, this.y, x, y);
   this.x = x;
   this.y = y;
  },
  //画矩形left, top, right, bottom
  //+1重载：第5个参数为填充颜色
  rect : function(l, t, r, b)...{
   var tmp, wid, hei;
   if(l>r)...{
    tmp=l;l=r;r=tmp;
   }
   if(t>b)...{
    tmp=t;t=b;b=tmp;
   }
   wid = r-l;
   hei = b-t; 
   if(arguments.length <= 4)...{
    this._inserthtml(this.out, this._gethtml(l, t, wid, hei));
   }else...{ //fill
    this._inserthtml(this.out, this._gethtml(l, t, wid, hei, arguments[4]));
   }   
  },
  //画圆，速度比较慢, 盼高人给个高效的算法
  circle : function(x, y, r)...{
   var radio, xx, yy;
   var Pi = Math.PI;
   var newDoc = document.createDocumentFragment();
   newDoc.innerHTML = "";
   for(var i=0.0;i<360;i+=0.5)...{
    radio=i*Pi/180;
    xx=r * Math.cos(radio) + x;
    yy=r * Math.sin(radio) + y;
    this._line2(newDoc, xx, yy, this.size, this.size);
   }
   this._inserthtml(this.out ,newDoc.innerHTML);
  },
  toString : function()...{ return this.out.innerHTML;},
  //清除
  clear : function()...{ this.out.innerHTML = "";}
 }
</ script >
</ head >
< script  type ="text/javascript" > ...
var oImg = null;
function $(o) ...{return document.getElementById(o);}
function DrawImage()...{
 
 var now1 =new Date();
 var StarTime_S=now1.getTime();
 
 oImg = new EasyDraw();
 
 oImg.setOrigin(50,50);
 oImg.setpixel(50,50);
 oImg.dot(60,60);
 oImg.line(100, 100, 300, 100);
 oImg.setcolor("#009000");
 oImg.line(100, 100, 100, 300);
 oImg.setcolor("#900000");
 oImg.line(100,100,200,400);
 oImg.setcolor("#009090");
 oImg.line(100,100,400,200);
 oImg.rect(200,200,250,250);
 oImg.setcolor("#ff0000");
 oImg.rect(300,300,350,350, "#EEEEEE");
 //oImg.circle(200,200,100);
 oImg.moveTo(400,400);
 oImg.lineTo(400,500);
 oImg.lineTo(500,500);
 oImg.lineTo(500,400);
 
 var now2 =new Date();
 var EndTime_S=now2.getTime();
 $("showTime").innerHTML = (EndTime_S-StarTime_S)+"ms";
}
function Show()...{
 $("divShow").style.display = "inline";
 $("txtShow").value = oImg.toString();  
 oImg.clear();
}
</ script >
< body  >
  < input  type ="button"  name ="btnStart"  value =" 测试 "  onClick ="DrawImage()"   />
  < input  type ="button"  name ="btnShow"  value =" 查看 "  onClick ="Show()"   />
 执行时间： < span  id ="showTime" ></ span >
  < br  />
  < div  id ="divShow"  style ="display:none;" >
   < textarea  id ="txtShow"  rows ="30"  cols ="100" ></ textarea >
  </ div >
  < div  id ="test" ></ div >
</ body >
</ html >