HTML5 Canvas API_html5 튜토리얼 팁을 통해 호와 원을 그리는 방법에 대한 튜토리얼

HTML5에서 CanvasRenderingContext2D 객체는 원이나 호를 그리기 위한 메소드도 제공합니다. 다음 속성 및 메소드 소개를 참조하세요.

JavaScript 코드클립보드에 콘텐츠 복사

1. arc(x, y, radius, startRad, endRad, 시계 반대 방향)

캔버스에 좌표점(x, y)을 중심으로 하고 반경을 반경으로 하는 원 위에 호를 그립니다. 이 호의 시작 호는 startRad이고 끝 호는 endRad입니다. 여기서 라디안은 x축의 양의 방향(시계의 3시 방향)을 기준으로 시계 방향 회전 각도로 계산됩니다. 반시계방향(Anticlockwise)은 반시계방향으로 그리기 시작할 것인지, 시계방향으로 시작할 것인지를 나타냅니다. true이면 시계 반대 방향을 의미하고, false이면 시계 방향을 의미합니다. 반시계방향 매개변수는 선택사항이며 기본값은 시계방향을 의미하는 false입니다.

arc() 메소드의 라디안 계산 방법

JavaScript 코드클립보드에 콘텐츠 복사

1. arcTo(x1, y1, x2, y2, radius)

이 방법은 현재 끝점인 끝점 1(x1, y1)과 끝점 2(x2, y2)가 이루는 각도를 사용한 다음 각도의 양쪽에 접하고 반지름이 다음과 같은 단면을 그립니다. 반경 원 위의 호. 일반적으로 호를 그리는 시작 위치는 현재 끝점, 종료 위치는 끝점 2, 호를 그리는 방향은 두 끝점을 연결하는 가장 짧은 호의 방향입니다. 또한 현재 끝점이 지정된 원 위에 있지 않은 경우 이 메서드는 현재 끝점에서 호의 시작점까지 직선을 그립니다.
arcTo() 메소드를 자세히 소개하기엔 지면이 많으니, 여기로 가시면 arcTo()의 자세한 사용법을 보실 수 있습니다.

위의 캔버스에 호를 그리는 API를 이해한 후, arc()를 사용하여 호를 그리는 방법을 살펴보겠습니다. 우리는 arc()가 수신한 4번째와 5번째 매개변수가 호의 시작 및 끝 라디안을 나타낸다는 것을 이미 알고 있습니다. 나는 모든 독자들이 학교 수학이나 기하학 과정에서 라디안을 배웠을 것이라고 믿습니다. 라디안은 각도의 단위입니다. 호 길이가 반지름과 같은 호의 경우 중심각은 1 라디안입니다. 우리는 또한 반지름이 r인 원의 원주가 2πr이라는 것을 알고 있습니다. 이러한 기하학 지식을 바탕으로 arc() 메서드를 사용하여 호를 그릴 수 있습니다.

캔버스를 사용하여 호 그리기

이제 반경이 50px인 원의 1/4호를 그려보겠습니다.

JavaScript 코드클립보드에 콘텐츠 복사

4. "UTF-8">
<본문>
"myCanvas"
10. width="400px" height="300px" style="테두리: 1px 단색 빨간색;"> 귀하의 브라우저가 캔버스 태그를 지원하지 않습니다.
<스크립트 유형=
13. "텍스트/자바스크립트"
>
14. //캔버스 객체 가져오기(캔버스)
15. var canvas = document.getElementById(
"myCanvas"
16. ); //html5를 지원하지 않는 일부 브라우저에서 구문 오류 메시지가 표시되는 것을 방지하기 위해 현재 브라우저가 Canvas 객체를 지원하는지 여부를 간단히 감지합니다.
17. if(canvas.getContext){ 
18. //해당 CanvasRenderingContext2D 객체(브러시) 가져오기
 
19. var ctx = canvas.getContext("2d"
);
20.   //새 그리기 경로 시작
ctx.beginPath()
22. //원호 색상을 파란색으로 설정
ctx.StrokeStyle =
24. "파란색";
var
25. 원 = {
y : 100,
26. //원 중심의 Y축 좌표값
r : 50
27. //원의 반지름
}
28. //좌표점(100,100)을 중심으로 반지름이 50px인 원을 시계방향으로 호를 그립니다.
29. ctx.arc(circle.x, Circle.y, Circle.r, 0, Math.PI / 2, false
)
31. //지정된 경로에 따라 호를 그립니다.
ctx.Stroke()
32. }

35. 해당 표시 효과는 다음과 같습니다.
    

    캔버스를 사용하여 시계 방향으로 호 그리기
    위와 같이 그려진 호가 위치한 원의 중심 좌표를 (100,100)로 설정하고 반경을 50px로 설정했습니다. 반지름이 r인 원의 원주는 2πr이므로, 즉 완전한 원의 해당 라디안은 2π(정각으로 환산하면 360°)이므로 원의 1/4인 호를 그리려고 합니다. 라디안이 π/2(즉, 90°)이면 됩니다. 위 코드에서는 JavaScript에서 π를 나타내는 상수 Math.PI를 사용합니다.

    또한 위 코드에서는 호를 그리는 방향도 시계방향(false)으로 설정했습니다. 시작 라디안이 0이고 끝 라디안이 π/2이므로 x축의 양의 방향에서 시작하여 시계 방향으로 호가 그려져 위의 그래프가 됩니다. 위 코드에서 호 그리기 방향을 시계 반대 방향으로 변경하면 어떤 효과가 있을까요?

    JavaScript 코드클립보드에 콘텐츠 복사

    1. <스크립트 유형="텍스트/자바스크립트">
    2. //캔버스 객체 가져오기(캔버스)
    3. var canvas = document.getElementById("myCanvas"); //html5를 지원하지 않는 일부 브라우저에서 구문 오류 메시지가 표시되는 것을 방지하기 위해 현재 브라우저가 Canvas 객체를 지원하는지 여부를 간단히 감지합니다.
    4. if
    5. (canvas.getContext){  //해당 CanvasRenderingContext2D 객체(브러시) 가져오기
    6.  var
    7. ctx = canvas.getContext("2d");  
    8. //새 그리기 경로 시작
    9. ctx.beginPath()
    10. //원호 색상을 파란색으로 설정
    11. ctx.StrokeStyle = "파란색"
    12. ; var 원 = {
    13. y : 100, //원 중심의 Y축 좌표값
    14. r : 50 //원의 반지름
    15. }
    16. //좌표점(100,100)을 중심으로 반지름 50px을 사용하여 원의 반시계방향으로 호를 그립니다.
    17. ctx.arc(circle.x, Circle.y, Circle.r, 0, Math.PI / 2, true
    18. ); > //지정된 경로에 따라 호를 그립니다.
    19. ctx.Stroke() }

    해당 표시 효과는 다음과 같습니다.
    

    캔버스를 사용하여 시계 반대 방향으로 호를 그립니다

    
    캔버스를 사용하여 원 그리기

    호 그리는 법을 배운 후에는 위 코드의 끝 호를 2π로 변경하면 됩니다.

    JavaScript 코드클립보드에 콘텐츠 복사
    1. <스크립트 유형="텍스트/자바스크립트">
    2. //캔버스 객체 가져오기(캔버스)
    3. var canvas = document.getElementById("myCanvas"); //html5를 지원하지 않는 일부 브라우저에서 구문 오류 메시지가 표시되는 것을 방지하기 위해 현재 브라우저가 Canvas 객체를 지원하는지 여부를 간단히 감지합니다.
    4. if
    5. (canvas.getContext){  //해당 CanvasRenderingContext2D 객체(브러시) 가져오기
    6.  var
    7. ctx = canvas.getContext("2d");  
    8. //새 그리기 경로 시작
    9. ctx.beginPath()
    10. //원호 색상을 파란색으로 설정
    11. ctx.StrokeStyle = "파란색"
    12. ; var 원 = {
    13. y : 100, //원 중심의 Y축 좌표값
    14. r : 50 //원의 반지름
    15. }
    16. //캔버스의 좌표점(100,100)을 중심으로 반경 50px의 원을 그린다
    17. ctx.arc(circle.x, Circle.y, Circle.r, 0, Math.PI * 2, true
    18. ); > //지정된 경로에 따라 호를 그립니다.
    19. ctx.Stroke() }
    21. 해당 표시 효과는 다음과 같습니다.
    22. JavaScript 코드
    23. 클립보드에 콘텐츠 복사
        1. <스크립트 유형="텍스트/자바스크립트">
        2. //캔버스 객체 가져오기(캔버스)
        3. var canvas = document.getElementById("myCanvas"); //html5를 지원하지 않는 일부 브라우저에서 구문 오류 메시지가 표시되는 것을 방지하기 위해 현재 브라우저가 Canvas 객체를 지원하는지 여부를 간단히 감지합니다.
        4. if
        5. (canvas.getContext){  //해당 CanvasRenderingContext2D 객체(브러시) 가져오기
        6.  var
        7. ctx = canvas.getContext("2d");  
        8. //새 그리기 경로 시작
        9. ctx.beginPath()
        10. //원호 색상을 파란색으로 설정
        11. ctx.StrokeStyle = "파란색"
        12. ; var 원 = {
        13. y : 100, //원 중심의 Y축 좌표값
        14. r : 50 //원의 반지름
        15. }
        16. //캔버스의 좌표점(100,100)을 중심으로 반경 50px의 원을 그린다
        17. ctx.arc(circle.x, Circle.y, Circle.r, 0, Math.PI * 2, true
        18. ); > //지정된 경로에 따라 호를 그립니다.
        19. ctx.Stroke() }
        21. 참고: arc() 메서드의 시작 라디안 매개 변수 startRad와 끝 라디안 매개 변수 endRad는 모두 라디안 단위입니다. 360과 같은 숫자를 입력하더라도 여전히 360라디안으로 간주됩니다. 위 코드의 끝 호를 360으로 설정하면 어떤 결과가 발생합니까? 이는 그리는 방향(즉, 시계 반대 방향 매개 변수의 값)에 따라 달라집니다. 시계 방향(false)으로 그려지면 완전한 원이 그려지고, 시계 반대 방향으로 그려지면 2π보다 큰 라디안은 라디안은 2π와 같으나 크지는 않습니다. 예를 들어 위 코드의 끝 호를 3π(Math.PI * 3)로 설정하면 시계 반대 방향이 false인 경우 완전한 원으로 표시됩니다. true인 경우 표시 효과는 동일합니다. 효과는 π로 설정됩니다.
        22. 끝 호를 3π로 설정하면 시계방향(거짓) 회전의 그리기 효과
        23. 끝 호를 3π로 설정하면 반시계방향(정)회전 그리기 효과