JS 그리기의 아이디어가 내 뇌를 통과했을 때, 나는 그것이 흥미 롭다고 느꼈기 때문에 연습했습니다. JS 도면은 원래 포인트, 선 및 표면에 관한 일련의 기사입니다.
예제를 먼저 살펴 보겠습니다 : http://www.zhaojz.com.cn/demo/draw5.html
조금
스팬 태그를 사용하여 여기에 포인트를 표시합니다.
코드 사본은 다음과 같습니다.
// 포인트의 크기, 색상, 좌표 및 레이블을 스캔합니다. Opts 매개 변수가 객체라는 것은 분명합니다.
함수 drawpoint (opts) {
document.write ( "<span id = '"+opts.point [0]+""+opts.point [1]+"'style = 'display :"+opts.pw+"px; 높이 :"+opts.ph+"px; 배경색 :"+opts.color+"; 위치 : pop.point [0]+"px; 상위 : "+opts.point [1]+"px; '> "+(opts.point [2]?
}
여러 매개 변수 :
opts.pw : 지점의 너비
opts.ph : 점의 높이는 일반적으로 opts.pw와 같습니다.
opts.color : 점의 색상
opts.point : 포인트의 위치, 점 [0] : 수평 위치, 점 [1] : 수직 위치 지점 [2]은 점의 레이블입니다.
참고 : 위치 속성은 절대적이어야합니다.
2. 직선
직선은 포인트로 구성되므로 두 점 사이에 N 포인트 이상을 그려야합니다. 시각적으로 직선입니다.
코드 사본은 다음과 같습니다.
// 선을 그립니다
// pstart 시작점
// 펜트 엔드 포인트
// 매개 변수를 선택합니다
함수 드로우 라인 (PSTART, PEND, OPTS) {
var pH = 1;
var pw = 1;
var color = "Darkred";
if (opts) {
color = 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 Diagonal = Math.sqrt (Math.pow (HDist, 2) + Math.Pow (vdist, 2)); // hypotenuse의 길이
var pn = parseint (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] <pstart [0]? -1 : 1)*(Noslope? 0 : 1) 시작점에서 수평 오프셋
// vgap*i*(pend [1] <pstart [1]? -1 : 1) 시작점에서 수직 오프셋
// (PEND [0] <PSTART [0]? -1 : 1) 수평 오프셋 방향
// (PEND [1] <PSTART [1]? -1 : 1) 수직 오프셋 방향
// (noslope? 0 : 1) 직선에 경사가 없으면 수평 오프셋은 0입니다.
DrawPoint ({
PW : PW,
pH : pH,
색상 : 색상,
포인트 : (HGAP*I*(PEND [0] <PSTART [0]? -1 : 1)*(NOSLOPE? 0 : 1)+PSTART [0]), (VGAP*I*(PEND [1] <PSTART [1]? -1 : 1)+PSTART [1])]
});
}
}
온라인을 기반으로 폴리 라인과 표면을 그릴 수 있습니다.
폴리 라인 :
코드 사본은 다음과 같습니다.
// 폴리 라인
// ps 1 차원 점 포인트 배열
함수 drawPolyline (ps) {
if (ps) {
// 선을 그립니다
for (var i = 0; i <ps.length-1; i ++) {
드로 라인 (ps [i], ps [i+1]);
}
// 전환점을 돌립니다
for (var i = 0; i <ps.length; i ++) {
DrawPoint ({
PW : 3,
pH : 3,
색상 : '빨간색',
포인트 : PS [i]
});
}
}
}
다각형 :
코드 사본은 다음과 같습니다.
//다각형
// ps 1 차원 점 포인트 배열
함수 DrawPolygon (ps) {
if (ps) {
// 선을 그립니다
for (var i = 0; i <ps.length-1; i ++) {
드로 라인 (ps [i], ps [i+1]);
}
// 닫힌 변경
if (ps.length> 2) {
드로 라인 (ps [ps.length-1], ps [0])
}
// 전환점을 돌립니다
for (var i = 0; i <ps.length; i ++) {
DrawPoint ({
PW : 3,
pH : 3,
색상 : '빨간색',
포인트 : PS [i]
});
}
}
}
구형:
코드 사본은 다음과 같습니다.
// 사각형을 그립니다
// 왼쪽 상단 코너의 포인트 위치를 왼쪽으로
//너비
//높은
함수 drawRectangle (왼쪽, 너비, 높음) {
DrawPolygon (
왼쪽 꼭대기,
[LeftTop [0], LeftTop [1]+High],
[LeftTop [0]+너비, LeftTop [1]+High],
[LeftTop [0]+너비, 왼쪽 [1]]
]);
//충전재
//document.write("<span style = '높이 : "+(High-1)+"px; 너비 : "+(width-1)+"px; 배경색 : "+"green "+"; 위치 : 절대; 왼쪽 : "+1)+"px; 상단 : "+(왼쪽 [1] +1)+"'> </span> ");
}
JS는 그런 멋진 일을 할 수 있다는 것이 밝혀졌습니다. 실제로 신중하게 연구해야합니다.