Canvas API 시작하기: Arcs

CanvasRenderingContext2d.arc()는 원 또는 원의 곡선 부분을 만드는 데 사용되는 방법입니다.

300x300 캔버스에 대한 참조를 가져옵니다.

<canvas id="canvas" height="300" width="300"></canvas>

const ctx = document.getElementById('canvas').getContext('2d');

호를 생성하려면 호 중심의 x,y 좌표, 반지름, 시작 각도, 끝 각도 및 선택적 반시계 방향 부울 값(기본값 false)이 필요합니다.

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)

이것은 충분히 간단해 보인다. 완전한 원을 만들려면 시작 각도가 0이고 끝 각도가 2*Math.PI이거나 라디안보다 도를 선호하는 경우 360*(Math.PI/180)입니다. 시계 반대 방향은 완전한 원이고 참인지 거짓인지는 중요하지 않으므로 값을 생략할 수 있습니다.

이렇게 하면 캔버스 중앙에 3px 검정색 테두리가 있는 회색 원이 생성됩니다. 무슨 일이 일어나고 있는지 더 쉽게 볼 수 있도록 눈금선을 만들었습니다.

const radius = 40;

ctx.lineWidth = 3;
ctx.strokeStyle = 'black';
ctx.fillStyle = 'grey';

ctx.beginPath();
ctx.arc(canvas.width/2, canvas.height/2, radius, 0, 2*Math.PI)

ctx.fill();
ctx.stroke();

처음에는 호를 만드는 것이 약간 혼란스러웠고 그 이유를 설명하겠습니다. 예를 들어 90°를 취하십시오.

ctx.arc(50, 90, 40, 0, 90*(Math.PI/180))

호가 양의 y 방향으로 단위 원의 90°와 일치할 것으로 예상했지만 대신 음의 y 방향으로 호가 내려갑니다. 움직이는 방향은 시계방향이고 0이 시작점인건 알지만 그래도 0에서 90도까지 보이지 않는 원을 따라 시계방향으로 움직이면서 90도에서 0사이의 원호를 채울거라고 생각하고 있습니다. HTML Canvas에서 그리드의 상단은 음의 y 방향이고 하단은 양의 y 방향이기 때문에 예상과 반대인 호입니다. 이해가 잘 되시면 댓글 남겨주세요.









다음은 시계 방향과 시계 반대 방향의 다른 각도를 볼 수 있도록 몇 가지 예입니다. 첫 번째 예에 표시된 것처럼 각각에 대해 ctx.beginPath() 및 ctx.stroke()를 사용하여 각 호가 개별적으로 생성된 것으로 가정합니다. 이미지의 경우 각 호의 중앙 x,y에 점(작은 채움 호)을 만들고 각 호의 strokeStyle(색상)을 변경하여 시각화하기 쉽게 했습니다.

// clockwise
no need for anticlockwise value since false is default
ctx.arc(50, 90, 40, 0, 90*(Math.PI/180));
ctx.arc(150, 90, 40, 0, 180*(Math.PI/180));
ctx.arc(250, 90, 40, 0, 270*(Math.PI/180));
ctx.arc(50, 90, 210, 0, 360*(Math.PI/180));

// counterclockwise - same as above except anticlockwise is true
ctx.arc(50, 90, 40, 0, 90*(Math.PI/180), true);
ctx.arc(150, 90, 40, 0, 180*(Math.PI/180), true);
ctx.arc(250, 90, 40, 0, 270*(Math.PI/180), true);
ctx.arc(50, 90, 210, 0, 360*(Math.PI/180), true);

closePath()를 사용하여 끝점을 연결할 수도 있습니다.

// 90deg example
ctx.beginPath();
ctx.arc(50, 90, 40, 0, 90*(Math.PI/180));
ctx.closePath();
ctx.stroke();

다음과 같이 호를 채울 수 있습니다.

// 90deg example
ctx.beginPath();
ctx.arc(50, 90, 40, 0, 90*(Math.PI/180));
ctx.closePath();
ctx.fill();
ctx.stroke();

기대했던 결과를 얻지 못한 이유를 이해하지 못하는 다른 사람에게 도움이 되기를 바랍니다.