Pure js Webページ描画ボード（グラフィックス）クラスの紹介と実装コード_JavaScriptスキル

/* 点、線、円を描画する次のメソッドHTML5 キャンバスは使用していませんが、純粋な JS で作られています
いくつかの数学的三角関数メソッドが使用されています
次のコードは、それ以上の最適化を行わずに、クラス内でランダムに記述されています
*/
/*
オブジェクト指向のカプセル化、追加 四角形の描画
コードをさらに最適化します
*/
var Graphics = function(divId, color){
this.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.backgroundColor=this. color;
oDiv.style.left =x 'px';
oDiv.style.top=y 'px';
//document.body.appendChild(oDiv); //注意: 戻り値は dom ノードですが、ドキュメントには追加されません
}
this.drawLine = function(x1,y1,x2,y2){
// を描画するメソッド線分。 (x1, y1)、(x2, y2) はそれぞれ線分の始点と終点です
var x=x2-x1;//width
var y=y2-y1;//height
var frag=document .createDocumentFragment();
if(Math.abs(y)>Math.abs(x)){//どちらの辺が長いかを、その辺を点の描画の基準として使用します。は以下のループ), if それ以外の場合、縦線または横線の場合は描画されません
if(y>0)//線の描画は次のようになります
for(var i=0; ivar width=x/y*i //x/y は直角の 2 辺の長さの比であり、この比に基づいて新しい座標の位置を求めます。
{

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)// 線の描画は次のようになります
(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(vardegree=0;degreevar x1=r*Math.sin(度*Math.PI/180);
var y1=r*Math.cos(度*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));//半径を持つ長い直角三角形の斜辺を求めますの二乗 = 2 つの直線の辺の二乗の合計

var frag=document.createDocumentFragment()
for(vardegree=0;degreevar x2=r*Math.sin(degree*Math.PI/180)
var y2=r*Math.cos(degree*Math.PI/180); .appendChild(drawPoint(x1 x2,y1 y2));
}
document.getElementById(this.divId).appendChild(frag);
this.drawRect = function(startX, startY, lengthX, lengthY, newId, text){
//(startX, startY) 開始点座標、lengthX、length lengthY、width newId、新しく作成された div テキストの ID、div content
var myDiv= document.createElement('div');
if(newId){
myDiv.id=newId;
myDiv.style.width= lengthX 'px'; .height = lengthY 'px';
myDiv.style.backgroundColor = this.color;
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'); ,30 ,0,30);
g.color = '#CDC9C9';
g.drawRect(10,10,200,200, '', 'テスト');