순수 js 웹페이지 드로잉보드(그래픽) 수업 소개 및 구현 code_javascript 기술

오늘은 웹페이지에 지도를 그려야겠다 싶어서 JS로 공부하고 검색해본 결과 HTML5 Canvas를 사용하지 않고 순수 JS를 사용하고 있으니 참고하세요

코드 복사 코드는 다음과 같습니다.

/* 점, 선, 원을 그리는 방법은 다음과 같습니다. HTML5 캔버스를 사용하지 않고 순수 js로 만들어졌습니다
일부 수학적 삼각함수 방식이 사용되었습니다
다음 코드는 추가 최적화 없이 클래스 내에서 임의로 작성되었습니다
*/
/*
객체 지향 캡슐화, 추가 직사각형 그리기
코드를 더욱 최적화하세요
*/
var Graphics = function(divId, color){
this.divId = divId; color = color; //'#000000' 또는 '검정색'
this.drawPoint= function(x,y){
//그리기 포인트
var oDiv=document.createElement('div');
oDiv.style.position='절대';
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;//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는 직각의 두 변의 길이의 비율입니다. 이 비율을 바탕으로 새 좌표의 위치를 ​​찾습니다.
{

frag.appendChild (drawPoint(width x1,i y1))
}
}
if(yfor(var i=0;i> ;y;i--){
var width=x/y*i
{
frag.appendChild(drawPoint(너비 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, 원점 가로좌표; 원점 세로좌표; 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){
//drag 원 그리기
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(x1 x2,y1 y2));
}
document.getElementById(this.divId).appendChild(frag)
}; startY, lengthX, lengthY, newId, text){
//(startX, startY) 시작점 좌표, lengthX, length lengthY, width newId, 새로 생성된 div 텍스트의 ID, div 콘텐츠
var myDiv= document.createElement('div');
if(newId){
myDiv.id=newId;
}
myDiv.style.width= lengthX 'px'
myDiv.style .height = lengthY 'px';
myDiv.style.groundColor =
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, '', '테스트')
}