首頁  >  文章  >  web前端  >  純js網頁畫板(Graphics)類別簡介及實作程式碼_javascript技巧

純js網頁畫板(Graphics)類別簡介及實作程式碼_javascript技巧

WBOY
WBOY原創
2016-05-16 17:45:461260瀏覽

今天需要在網頁上畫一個圖譜,想到用JS,經過學習,和網上搜索,經過整理優化得到下面代碼,注意不是用HTML5的canvas,而是用的純js

複製程式碼 程式碼如下:

/* 以下畫點,畫線,畫圓的方法,都不是用HTML5的canvas,而是用的純js
用到了一些數學的三角函數方法
以下程式碼是課堂隨機寫出,沒有做更多優化
*/
/*
物件導向封裝,添加繪製矩形
進一步最佳化程式碼
*/
var Graphics = function(divId, color){
this.divId = divId;
this.color = color; //'#000000'或'black'
this.drawPoint= function(x,y){
//畫點
var oDiv=document.createElement('div');
oDiv.style.position=' absolute';
oDiv.style.height='2px';
oDiv.style.width='2px';
oDiv.style.backgroundColor=this.color;
oDiv.style.left =x 'px';
oDiv.style.top=y 'px';
//document.body.appendChild(oDiv);
return oDiv;//注意:傳回的值是一個dom節點,但並未追加到文件中
};
this.drawLine = function(x1,y1,x2,y2){
//畫一條線段的方法。 (x1,y1),(x2,y2)分別為線段的起點終點
var x=x2-x1;//寬
var y=y2-y1;//高
var frag=document .createDocumentFragment();
if(Math.abs(y)>Math.abs(x)){//那個邊更長,用那邊來做畫點的依據(就是下面那個循環),如果不這樣,當是一條垂直線或水平線的時候,會畫不出來
if(y>0)//正著畫線是這樣的
for(var i=0;ivar width=x/y*i //x/y是直角兩個邊長的比,根據這個比例,求出新座標的位置
{

frag.appendChild( drawPoint(width x1,i y1));
}
}
if(yfor(var i=0;i> y;i--){
var width=x/y*i
{
frag.appendChild(drawPoint(width x1,i y1));
}
}
}
}//end if
else {

if(x>0)//正著畫線是這樣的
for(var i=0;ivar height=y/x*i
{

frag.appendChild(drawPoint(i x1,height y1));
}
}
if( xfor(var i=0;i>x;i--){
var height=y/x*i
{
frag.appendChild(this.drawPoint(i x1,height y1));
}
}
}//end if

}
document.getElementById(this. divId).appendChild(frag);
};
this.drawCircle = function(r, x, y){
//畫個圓。 x,原點橫座標;y,原點縱座標;r,半徑
var frag=document.createDocumentFragment();
for(var degree=0;degreevar x1=r*Math.sin(degree*Math.PI/180);
var y1=r*Math.cos(degree*Math.PI/180);
frag.appendChild(drawPoint(x x1, y y1));
}
document.body.appendChild(frag);
};
this.dragCircle = function(x1,y1,x2,y2){
//拖曳出一個圓來
var r=Math.sqrt((x2-x1)*(x2-x1) (y2-y1)*(y2-y1));//求半徑的長直角三角形中斜邊的平方=兩個直邊的平方和

var frag=document.createDocumentFragment();
for(var degree=0;degreevar x2=r*Math.sin(degree*Math.PI/180);
var y2=r*Math.cos(degree*Math.PI/180);
frag .appendChild(drawPoint(x1 x2,y1 y2));
}
document.getElementById(this.divId).appendChild(frag);
};
this.drawRect = function(startX, startY, lengthX, lengthY, newId, text){
//(startX, startY)起點座標,lengthX,長lengthY,寬newId,新建立的div的Id text,div內容
var myDiv=document. createElement('div');
if(newId){
myDiv.id=newId;
}
myDiv.style.width= lengthX 'px';
myDiv.style.height = lengthY 'px';
myDiv.style.backgroundColor = this.color;
myDiv.style.left=startX 'px';
myDiv.style.top=startY 'px';
myDiv.style.textAlign= 'center';
if(text){
myDiv.innerHTML = text;
}
document.getElementById(this.divId).appendChild(myDiv); };
};

window.onload=function(){
var g = new Graphics('div1', 'red');
g.drawLine(500,30 ,0,30);
g.color = '#CDC9C9';
g.drawRect(10,10,200,200, '', '測試');
}

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn