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

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

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

1. 포인트

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

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

//점을 그립니다. 매개변수는 점의 크기, 색상, 좌표 및 레이블입니다. 분명히 opts 매개변수는 객체입니다.
함수 drawPoint(opts){
document.write(" (opts.point[2 ]?("

" 선택 .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 pn=0일 때 var vgap = Math.abs(vdist)/pn; //인접한 두 점 사이의 수직 거리
var hgap = Math.abs(hdist)/pn; //인접한 두 점 사이의 수평 거리
for(var i = 0; 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도 이런 멋진 일을 할 수 있다는 걸 알게 되었는데, 정말 주의 깊게 공부해야겠어요