javascript 简单图形库_javascript easydraw-优快云博客

本文链接：https://blog.youkuaiyun.com/Free_Wind22/article/details/2158466

本文介绍了一个简单的HTML绘图库EasyDraw，它使用HTML和JavaScript实现基本的绘图功能，如画点、线、矩形等，并提供了一个示例程序来展示其用法。

<html>

<head>

<title>Tetris</title>

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>

//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

}

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>

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 >

执行时间：<span id="showTime"></span>

<br />

</div>

</body>

</html>