js를 사용하여 원, 호 및 섹터를 그립니다._javascript 기술

반경이 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(점, r, 압축 비율, 데이터){
var pstart = [dot[0] r, dot[1]] //시작점
var pre = pstart
for(var i=0; i rad = i*Math.PI/180; //라디안 계산
//r*Math.cos(rad) 점을 기준으로 한 호 끝점의 수평 오프셋
//r*Math.sin(rad) 점을 기준으로 한 호 끝점의 수직 오프셋
//compressionRatio 수직 압축률
         var cur = [r*Math.cos(rad) dot[0], 압축 비율*r*Math.sin(rad) dot[1]];
        drawLine(pre,cur);
          pre = cur //현재 지점의 좌표를 저장
}
DrawLine(pre,pstart);//닫기
//점 그리기
drawPoint({
         pw:2,ph:2,color:'DarkRed',point:dot
});
}

2. 아크

원의 일부만 그리면 알고리즘은 원과 비슷합니다

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

//호 그리기
//점점
//r 반경
//각도 중심각
//angleOfSlope와 x축 사이의 각도
//팝업여부 팝업
//제목태그
함수 drawArc(dot, r, angle, angleOfSlope, pop, title){
var newDot = [dot[0], dot[1]];
var a = (angleOfSlope 각도/2)*Math.PI/180
If(pop){ //원 중심의 새로운 좌표를 계산합니다
newDot[0] = 도트[0] 10*Math.cos(a);
newDot[1] = 도트[1] 10*Math.sin(a);
}
If(!angleOfSlope){
angleOfSlope = 0;
}
var aos = angleOfSlope*Math.PI/180;
var aos2 = (angleOfSlope 각도)*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          rad = (i angleOfSlope)*Math.PI/180;
        var cur = [r*Math.cos(rad) newDot[0], r*Math.sin(rad) newDot[1]];
        drawLine(pre,cur);
          pre = cur;
}
}

3. 부채 모양

원호의 두 끝을 원의 중심에 연결하세요

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

//섹터
//점점
//r 반경
//각도 중심각
//angleOfSlope와 x축이 섹터 방향을 결정합니다
//팝이 튀는지, 즉 원의 중심에서 벗어나는지
//제목태그
함수 drawSector(dot, r, angle, angleOfSlope, pop, title){
var newDot = [dot[0], dot[1]];
var a = (angleOfSlope 각도/2)*Math.PI/180
If(pop){ //원 중심의 새로운 좌표를 계산합니다
newDot[0] = 도트[0] 10*Math.cos(a);
newDot[1] = 도트[1] 10*Math.sin(a);
}
If(!angleOfSlope){
angleOfSlope = 0;
}
var aos = angleOfSlope*Math.PI/180;
var aos2 = (angleOfSlope 각도)*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          rad = (i angleOfSlope)*Math.PI/180;
        var cur = [r*Math.cos(rad) newDot[0], r*Math.sin(rad) newDot[1]];
        drawLine(pre,cur);
          pre = cur;
}
drawPolyline([pre, pend, newDot]) //닫기
//원의 중심 그리기
drawPoint({
         pw:2,ph:2,color:'DarkRed',point:dot
});
//태그
만약(제목){
document.write(" 제목 "<" ;/span>");
}
}

JS가 이렇게 멋진 일을 할 수 있다는 게 놀랍지 않나요? . .