純js網頁畫板(Graphics)類簡介及實現代碼
2024-05-06 14:20:22
供稿：網友
今天需要在網頁上畫一個圖譜，想到用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;i<y;i++){
var width=x/y*i //x/y是直角兩個邊長的比，根據這個比例，求出新坐標的位置
{
frag.appendChild(drawPoint(width+x1,i+y1));
}
}
if(y<0){//有時候是倒著畫線的
for(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;i<x;i++){
var height=y/x*i
{
frag.appendChild(drawPoint(i+x1,height+y1));
}
}
if(x<0){//有時候是倒著畫線的
for(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;degree<360;degree+=2){
var 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;degree<360;degree+=2){//每隔2度畫一個點
var x2=r*Math.sin(degree*Math.PI/180);
var y2=r*Math.cos(degree*Math.PI/180);
