JS를 사용하여 점, 선 및 표면 그리기_javascript 기술-JS 튜토리얼-php.cn

JS를 사용하여 점, 선 및 표면 그리기_javascript 기술

WBOY

풀어 주다： 2016-05-16 16:20:55

원래의

1534명이 탐색했습니다.

JS 그림 아이디어가 떠올랐을 때 재미있다고 생각해서 실천에 옮겼습니다. JS 드로잉은 원래 점, 선, 표면에 관한 일련의 기사입니다

먼저 샘플을 보세요: http://www.zhaojz.com.cn/demo/draw5.html

1. 포인트

여기에서는 스팬 태그를 사용하여 포인트를 표현합니다

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

//점을 그립니다. 매개변수는 점의 크기, 색상, 좌표 및 레이블입니다. 분명히 opts 매개변수는 객체입니다. 

함수 drawPoint(opts){

document.write(" (opts.point[2 ]?("<스팬 스타일='위치: 절대; 왼쪽: 5px; 하단: 1px; 텍스트 정렬: 왼쪽; 너비: 100px;'>" 선택 .point[2] "
"):"") "");

}

여러 매개변수:

opts.pw: 포인트 너비

opts.ph: 점의 높이, 일반적으로 opts.pw와 동일

opts.color : 포인트 컬러

　opts.point: 점의 위치를 나타내며, point[0]: 가로 위치, point[1]: 세로 위치 point[2]는 점의 레이블입니다.

참고: 위치 속성은 절대값이어야 합니다.

2. 직선

직선은 점들로 구성되어 있으므로 두 점 사이에 n개의 점을 그려야 합니다. 시각적으로는 직선입니다.

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

//선 그리기

//pstart 시작점

//끝점 보류

//매개변수 선택

함수 drawLine(pstart, pend, opts){

var ph = 1;

var 비밀번호 = 1;

var color = "DarkRed";

만약(선택){

         색상 = opts.color ? opts.color: 색상;

}

var 경사; //경사

var noSlope = false; //경사가 있나요

var hdist = pend[0] - pstart[0];

var vdist = pend[1] - pstart[1];

If(hdist != 0){

        기울기 = Math.abs(vdist/hdist) //기울기 계산

}그밖에{

         noSlope = true; //hdist=0이면 직선에는 경사가 없습니다

}

var gapp = pw > ph ? ph : pw; //인접한 점 사이의 기본 거리(왼쪽 위 모서리의 픽셀)
 
var 대각선 = Math.sqrt(Math.pow(hdist,2) Math.pow(vdist,2)); //사변 길이

var pn = parsInt(diagonal/gapp); //두 점 사이의 점 개수 계산

If(pn < 3){pn=pn*3 1}; //포인트 수가 3개보다 적으면 포인트 수를 늘리십시오. 이유는 1개 이상의 포인트가 있는지 확인하기 위함입니다. 
 pn=0일 때
var vgap = Math.abs(vdist)/pn; //인접한 두 점 사이의 수직 거리

var hgap = Math.abs(hdist)/pn; //인접한 두 점 사이의 수평 거리

for(var i = 0; i< pn ; i ){

>                                     
​​​​ //hgap 인접한 두 점 사이의 수평 거리

​​​​ //vgap 인접한 두 점 사이의 수직 거리

​​​​ //hgap*i*(pend[0]
​​​​ //vgap*i*(pend[1]
//(pend[0]
//(pend[1]
​​​​ //(noSlope?0:1) 직선에 경사가 없으면 수평 오프셋은 0입니다

        drawPoint({

             비밀번호: 비밀번호,

ph: ph,

             색상: 색상,

포인트: [(hgap*i*(pend[0]
        });

}

}

선을 기준으로 폴리선과 표면을 그릴 수 있습니다.

폴리라인:

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

//폴리라인

//ps 1차원 점 배열
함수 drawPolyline(ps){
만약(ps){
//선 그리기
for(var i = 0; i              drawLine(ps[i], ps[i 1]);
}
//변곡점 그리기
for(var i = 0; i              drawPoint({
                 비밀번호: 3,
ph: 3,
                  색상: 'RED',
포인트: ps[i]
            });
}

}
}

다각형:

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

//다각형

//ps 1차원 점 배열

함수 drawPolygon(ps){

만약(ps){

//선 그리기

for(var i = 0; i
             drawLine(ps[i], ps[i 1]);

}

​​​​ //닫기

If(ps.length > 2){

             drawLine(ps[ps.length-1], ps[0])

}

​​​​ //변곡점 그리기

for(var i = 0; i
             drawPoint({

                 비밀번호: 3,

ph: 3,

                  색상: 'RED',

포인트: ps[i]

            });

}

}

}

직사각형:

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

//직사각형 그리기

//leftTop 왼쪽 상단 꼭지점의 위치

//너비 너비

//하이하이

함수 drawRectangle(leftTop, 너비, 높이){

drawPolygon([

          왼쪽상단,

         [leftTop[0], leftTop[1] 높음],

         [leftTop[0] 너비, leftTop[1] 높이],

[leftTop[0] 너비, leftTop[1]]

]);

//패딩

//document.write("");

}

JS도 이런 멋진 일을 할 수 있다는 걸 알게 되었는데, 정말 주의 깊게 공부해야겠어요