반경 R을 갖는 원의 점 P (x, y)와 원의 중심 O (x0, y0) 사이의 관계 : x = x0+rcosa; y = y0+rsina, a는 라디안입니다
예 : http://www.zhaojz.com.cn/demo/draw6.html
1. 원
코드 사본은 다음과 같습니다.
// 원/타원
// 도트 도트
// r 반경
// compressionratio 수직 압축 비율
함수 DrawCircle (DOT, R, CompressionRatio, Data) {
var pstart = [dot [0]+r, dot [1]]; // 시작점
var pre = pstart;
for (var i = 0; i <360; i+= 5) {
rad = i*math.pi/180; // 라디안을 계산합니다
//r*math.cos(rad) Arc의 종말점의 수평 오프셋
//r*math.sin(Rad) DOT에 대한 아크의 종말점의 수직 오프셋
// compressionratio 수직 압축 비율
var cur = [r*math.cos (rad)+dot [0], compressionratio*r*math.sin (rad)+dot [1]];
드로 라인 (pre, cur);
pre = cur; // 현재 지점의 좌표를 저장합니다
}
Drawline (pre, pstart); // 닫힙니다
// 도트를 그리십시오
DrawPoint ({
PW : 2, pH : 2, 색상 : 'Darkred', Point : DOT
});
}
2. 아크
원의 일부를 그만두면 알고리즘은 원과 유사합니다.
코드 사본은 다음과 같습니다.
// 아크를 그립니다
// 도트 도트
// r 반경
//각도
// x 축의 Angleofslope 각도
// 팝 팝업 여부
// 제목 태그
함수 drawArc (dot, r, angle, angleofslope, pop, title) {
var newdot = [dot [0], dot [1]];
var a = (angleofslope+angle/2)*math.pi/180;
if (pop) {// 원의 중심의 새로운 좌표를 계산합니다.
NewDOT [0] = DOT [0]+10*Math.Cos (a);
NewDot [1] = DOT [1]+10*Math.Sin (A);
}
if (! angleofslope) {
angleofslope = 0;
}
var aos = angleofslope*math.pi/180;
var aos2 = (angleofslope+angle)*math.pi/180;
var pstart = [newdot [0]+r*math.cos (aos), newdot [1]+r*math.sin (aos)]; // 아크의 시작점
var pend = [newdot [0]+r*math.cos (aos2), newdot [1]+r*math.sin (aos2)]; // 아크의 끝점
var pre = pstart;
for (var i = 0; i <angle; i+= 2) {// 각도 범위 내에서 아크를 그립니다.
rad = (i+angleofslope)*math.pi/180;
var cur = [r*math.cos (rad)+newdot [0], r*math.sin (rad)+newdot [1];
드로 라인 (pre, cur);
pre = cur;
}
}
3. 팬 모양
아크의 두 끝을 원의 중앙에 연결
코드 사본은 다음과 같습니다.
//부문
// 도트 도트
// r 반경
//각도
// AngleofSlope x 축 사이의 각도는 섹터 모양의 방향을 결정합니다.
// 팝이 팝업되는지, 즉 원의 중심에서 벗어나 든
// 제목 태그
함수 DrawSector (DOT, R, Angle, AngleofSlope, Pop, Title) {
var newdot = [dot [0], dot [1]];
var a = (angleofslope+angle/2)*math.pi/180;
if (pop) {// 원의 중심의 새로운 좌표를 계산합니다.
NewDOT [0] = DOT [0]+10*Math.Cos (a);
NewDot [1] = DOT [1]+10*Math.Sin (A);
}
if (! angleofslope) {
angleofslope = 0;
}
var aos = angleofslope*math.pi/180;
var aos2 = (angleofslope+angle)*math.pi/180;
var pstart = [newdot [0]+r*math.cos (aos), newdot [1]+r*math.sin (aos)]; // 아크의 시작점
var pend = [newdot [0]+r*math.cos (aos2), newdot [1]+r*math.sin (aos2)]; // 아크의 끝점
Drawline (Newdot, Pstart); // 원의 중심과 시작점을 연결
var pre = pstart;
for (var i = 0; i <angle; i+= 2) {// 각도 범위 내에서 아크를 그립니다.
rad = (i+angleofslope)*math.pi/180;
var cur = [r*math.cos (rad)+newdot [0], r*math.sin (rad)+newdot [1];
드로 라인 (pre, cur);
pre = cur;
}
DrawPolyline ([Pre, Pend, Newdot]); // 닫습니다
// 원의 중심을 그립니다
DrawPoint ({
PW : 2, pH : 2, 색상 : 'Darkred', Point : DOT
});
//상표
if (제목) {
document.write ( "<span style = 'height : 24px; line-height : 24px; 너비 : 80px; 텍스트-정렬 : 중심; 색상 : 빨간색; 위치 : 절대; 왼쪽 :"+(newdot [0]+r*(2/4))*math.cos (a) -40)+"px; "+(NewDot [1]+r*(2/4)*Math.Sin (a) -12)+" '> "+title+"</span> ");
}
}
충격적이지 않습니까? JS는 그런 멋진 일을 할 수 있다는 것이 밝혀졌습니다. . .