html5 캔버스 그리기 튜토리얼(5) - canvas_html5 튜토리얼 기술에서 곡선을 그리는 원호 방법

이번 캔버스에 선 그리기 기사에서는 직선을 그리는 방법에 대해 이야기했습니다. 논리적으로 곡선 그리기에 관한 이 기사는 오래 전에 게시되었어야 했지만, 캔버스에 곡선을 그리는 것은 꽤 특별하기 때문에 저는 그렇게 하지 않았습니다. 아직 파악하지 못했으니 차근차근 시도해 보세요.
캔버스에서 곡선을 그릴 때 어려운 점 중 하나는 곡선에 대한 기능이 4가지뿐이라는 점이에요! 그들은 arc, arcTo,quadraticCurveTo 및 bezierCurveTo입니다. 가장 간단한 호 방법부터 시작하겠습니다.
호의 기능은 완전한 원일 수도 있고 원의 특정 호일 수도 있는 규칙적인 호를 그리는 것입니다. arc의 구문은 다음과 같습니다. 🎜>

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
매개변수를 설명하겠습니다.
arc(원의 중심 x, 원의 중심 y, 반지름, 시작 각도, 끝 각도, 시계 반대 방향 여부)

코드 복사


코드


ctx.arc(400,400,20,0,Math.PI*2) ctx.fill() ctx.Stroke(); >

lineTo와 마찬가지로 arc도 그리기 경로이므로 그래픽을 표시하려면 그 뒤에 있는 fill 또는 스트로크 메서드를 호출해야 합니다(그림에서는 빨간색 스트로크 스타일과 반투명 빨간색 채우기 스타일이 사용됨). 코드는 다음과 같습니다.

ctx.arc(400,400, 20,0 ,Math.PI*2/4);

코드 복사
ctx.arc(400,400, 20,0 ,Math.PI*2/4,true);





코드는 다음과 같습니다.


ctx.arc(400,400, 20,Math .PI*2/4,Math.PI*2 Math.PI)


시작점이 90도이고 끝점도 90도이면 결과는 아무것도 아닙니다. 그릴 수 있으므로 끝점을 두고 각도를 180도로 변경하여 최종적으로 아래와 같은 그래프가 얻어졌습니다.


코드는 다음과 같습니다:

ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2 Math.PI*2/4) / /시작점은 90도, 끝점은 360 90도

그러나 이 접근 방식은 단지 문제를 찾는 것일 뿐 일반 사람들은 사용하지 않을 것입니다.
요약: Canvas의 호 방법은 양의 호만 그릴 수 있고 S자 같은 다른 이상한 호는 그릴 수 없습니다. 하지만 저는 S를 가장 좋아합니다. - 모양.