javascript 简单图形库
2008-03-08 15:48
211 查看
<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>
相关文章推荐
- 原生JavaScript实现一个简单的todo-list
- JavaScript编写页面半透明遮罩效果的简单示例
- 一段会弹跳的窗口的javascript的简单代码
- javascript简单对象创建
- 一段简单的javascript代码
- JavaScript中DOM树的Node接口的一些简单应用
- javascript面向对象与命名空间-简单示例
- javascript简单小函数
- javascript 删除数组元素和清空数组的简单方法
- 验证整数、小数、实数、有效位小数最简单JavaScript正则表达式
- javascript简单判断输入内容是否合法的方法
- javascript实现简单的ajax封装示例
- javascript新闻列表排序简单封装
- 使用JavaScript实现简单的瀑布流
- 什么是JSON+JavaScript处理JSON的简单例子
- javascript简单拖拽(鼠标事件 mousedown mousemove mouseup)
- 一个简单的ObjC和JavaScript交互工具
- JSON+JavaScript处理JSON的简单例子
- javascript多行字符串的简单实现方式
- javascript简单教程