1-2-4.원호
원이나 원호를 그릴 때는 다음 메서드를 호출한다.
arc(x, y, r, st, ed, anticlockwise)
(x, y)는 원의 중심점이고 r은
반지름이다. st, ed는 시작각과 끝각인데 각도는 세시 방향을 0도로
하여 시계 방향으로 증가하는 라디안 값이다. 6시 방향이 90도이고 9시 방향이 180도이다.
라디안은 반지름과 원주 길이가 같아지는 각도를 의미한다. 우리는 라디안보다는
각도에 더 익숙한데 360분법의 각도를 라디안으로 바꾸려면 다음 공식을 사용한다.
라디안 = 각도 * Math.PI/180
완전한 원을 그리려면 0도 ~
360도까지 원호를 그린다. anticlockwise는 원호의 방향을 지정한다. true이면 반시계, false이면 시계 방향이되 생략시 false가 적용된다. 다음 예제는
0도 ~ 120도까지 원호를 두 방향으로 각각 그린다.
drawarc.html
function draw() {
ctx.beginPath();
ctx.arc(100,100,70,0
* Math.PI / 180, 120 * Math.PI / 180, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(300,100,70,0
* Math.PI / 180, 120 * Math.PI / 180, true);
ctx.stroke();
}
시작각과 끝각은 같지만 원호의 방향이 다르다. 왼쪽 원은 0도에서 시작해서 시계 방향으로 120도까지 돌고 오른쪽 원은 0도에서 반시계 방향으로 120도까지 돈다. 방향이 다름으로 인해 원호의 길이도 다르다.
두개의 분리된 원호이므로 패스를 분리하여 두 번 그렸다. arc는
서브 패스가 있으면 현재 위치와 호의 시작점을 연결한다. 두 원호를 같은 패스에 넣으면 첫번째 원호의
끝점과 두번째 원호의 시작점이 연결되어 오른쪽 그림처럼 되어 버릴 것이다.
drawarc2.html
function draw() {
ctx.beginPath();
ctx.arc(100,100,70,0
* Math.PI / 180, 120 * Math.PI / 180, false);
ctx.arc(300,100,70,0
* Math.PI / 180, 120 * Math.PI / 180, true);
ctx.stroke();
}
fill 메서드로 원호의 안쪽을 채우면 원호의 양쪽 끝이 연결되어
반달 모양이 그려진다. 원호의 끝을 원의 중심과 연결하여 피자 모양으로 그리고 싶다면 moveTo 메서드로 시작점을 원의 중심에 두고 원호를 그려 채운다. 다음
예제는 반달과 피자를 그린다.
drawpie.html
function draw() {
ctx.beginPath();
ctx.arc(100,100,70,0
* Math.PI / 180, 120 * Math.PI / 180);
ctx.fill();
ctx.beginPath();
ctx.moveTo(300,100);
ctx.arc(300,100,70,0
* Math.PI / 180, 120 * Math.PI / 180);
ctx.fill();
}
원호의 시작각, 끝각은 같다. 첫번째
원호는 원주의 끝을 연결해서 닫으므로 반달 모양이다. 두번째 원호는 중심으로 이동한 상태로 그리므로
중심과 원호 시작점과 연결되고 fill 메서드에 의해 원호 끝점이 중심과 연결되므로 피자 모양이 된다.
두번째 원호는 다음과 같이 그려도 마찬가지이다. 원주를 일단 그려
놓고 중심점까지 선을 그으면 선끝과 원주 시작점은 fill 메서드가 알아서 연결해 준다.
ctx.beginPath();
ctx.arc(300,100,70,0 * Math.PI / 180, 120 *
Math.PI / 180);
ctx.lineTo(300,100);
ctx.fill();
원호가 아니라 완전한 원을 그리리면 0 ~ 360도까지 원호를 다
그리면 된다.
drawcircle.html
function draw() {
ctx.beginPath();
ctx.arc(200,100,80,0,
2 * Math.PI);
ctx.stroke();
}
360도는 2 * Math.PI 라디안이므로
굳이 360 * Math.PI / 180이라고 쓰지 않아도 된다. 원주
전체를 그리므로 방향도 의미가 없다. 왼쪽으로 도나 오른쪽으로 도나 어차피 원 전체가 다 그려진다.
정원을 그리는 메서드는 따로 제공되지 않지만 arc 함수를 래핑하면
쉽게 만들 수 있다. 원을 그릴 일은 아주 흔하고 또 피자 모양의 파이도 종종 사용된다. 자주 사용하는 메서드가 있다면 컨텍스트를 확장하여 정의하면 된다. 다음
예제는 원의 외곽선을 그리는 메서드와 원의 안쪽을 채우는 메서드를 정의한다.
arcfunc.html
CanvasRenderingContext2D.prototype.strokeCircle = function(x, y, r)
{
this.beginPath();
this.arc(x,
y, r , 0, 2 * Math.PI);
this.stroke();
}
CanvasRenderingContext2D.prototype.fillCircle = function(x, y, r) {
this.beginPath();
this.arc(x,
y, r , 0, 2 * Math.PI);
this.fill();
}
function draw() {
ctx.strokeCircle(100,
100, 80);
ctx.fillCircle(300,
100, 80);
}
메서드 이름은 캔버스의 다른 그리기 메서드와 같이 stroke~, fill~로
작성하여 일관성을 유지했다. 컨텍스트에 메서드가 추가되므로 기존의 메서드와 동일한 방법대로 사용할 수
있다.
장축과 단축이 다른 타원을 그리는 메서드는 다음에 배울 변환 기법을 사용해야 한다. 마찬가지로 자주 사용한다면 래핑해 놓으면 된다. 다음 메서드는 두
직선에 내접하는 원호를 그린다.
arcTo(x1, y1, x2, y2, r)
이 메소드가 동작하려면 패스에 현재 위치가 지정되어 있어야 한다. 현재
위치를 (x0, y0)이라고 할 때 현재 위치에서 (x1, y1)까지
가상의 선을 긋고 다시 (x2, y2)까지 가상의 선을 그은 후 두 선에 내접하는 반지름 r의 원호를 그린다. 그리고 현재 위치와 원호의 시작점을 연결한다. 동작이 복잡해서 직관적으로 이해하기 어려우므로 예제를 보자.
arcto.html
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.arcTo(100, 150, 200, 10, 40);
ctx.stroke();
}
패스를 시작하자 마자 moveTo 메서드로 현재 위치를 (10, 10)으로 지정했다. 현재 위치가 없으면 arcTo 메서드는 아무 것도 그리지 않는다. (10, 10) - (100,
150) 까지의 직선과 (100, 150) - (200, 10)까지의 직선에 내접하는 반지름 40의 타원을 그리고 현재 위치와 연결한다.
실행 결과만 봐서는 얼른 감이 오지 않을 것이다. 어째서 이런 그림이
나오는지 좌표를 분석해 보자.
두 직선은 원호의 외접 모양을 결정하기 위한 가상의 안내선일 뿐이므로 출력되지 않는다. 다만 현재 위치와 원호의 시작점은 연결되므로 그려진다. 모서리가
둥근 사각형을 그릴 때 이 메서드를 활용한다.
roundarc.html
function draw() {
ctx.beginPath();
ctx.moveTo(10,
10);
ctx.arcTo(200,
10, 200, 50, 50);
ctx.lineTo(200,
100);
ctx.arcTo(200,
150, 10, 150, 50);
ctx.lineTo(10,150);
ctx.stroke();
}
좌표가 좀 복잡한데 어떤 그림이 나올지 직접 연습장에 그려 보고 분석해 보자.
이 메서드를 잘 활용하면 둥근 사각형을 그릴 수 있다. 4변에 대해 arcTo를 일일이 호출해야 하므로 좌표 계산이 좀 복잡하다. 자주
사용한다면 다음과 같이 래퍼 메서드를 작성해 둔다.
roundrect.html
CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h,
r) {
this.beginPath();
this.moveTo(x+r,
y);
this.arcTo(x+w,y,x+w,y+h,r);
this.arcTo(x+w,y+h,x,y+h,r);
this.arcTo(x,y+h,x,y,r);
this.arcTo(x,y,x+w,y,r);
}
CanvasRenderingContext2D.prototype.strokeRoundRect = function (x, y,
w, h, r) {
this.roundRect(x,
y, w, h, r);
this.stroke();
}
CanvasRenderingContext2D.prototype.fillRoundRect = function(x, y, w,
h, r) {
this.roundRect(x,
y, w, h, r);
this.fill();
}
function draw() {
ctx.strokeRoundRect(10,
10, 120, 100, 20);
ctx.fillRoundRect(150,
10, 120, 100, 30);
}
왼쪽 모서리에서 시작해서 시계 방향으로 각 꼭지점을 돌며 4변을 arcTo 메서드로 연결했다. 패스를 만드는 코드는 같고 최종적으로
호출할 메서드가 stroke인지 fill 인지만 다르므로
패스를 정의하는 별도의 도우미 메서드를 하나 더 만들었다.
arcTo 메서드는 직관적이지도 않고 사용하기도 불편하다. 둥근 사각형을 위해서라면 차라리 위에서 만든 roundRect 메서드를
제공하는 것이 더 낳았을 것이다. 그러나 arcTo 메서드를
굳이 제공하는 이유는 이 메서드를 응용하면 둥근 삼각형도 그릴 수 있기 때문이다. 다음 예제는 둥근
삼각형을 그린다.
triangle.html
function draw() {
ctx.beginPath();
ctx.moveTo(14,152);
ctx.arcTo(90,
0, 180, 180, 20);
ctx.arcTo(180,
180, 0, 180, 20);
ctx.arcTo(0,
180, 90, 0, 20);
ctx.stroke();
}
예를 보이기 위해 호의 끝 좌표는 눈대중으로 대충 끼워 맞추었으며 메서드로 추가하지는 않았다. 호의 끝을 제대로 계산하려면 약간 복잡한 수식을 동원해야 한다.
비슷하게 응용하면 모서리가 둥근 오각형, 육각형, 팔각형도 만들 수 있으며 끝이 뭉툭한 별모양도 만들 수 있다. 이런
응용이 가능하기 때문에 arcTo 메서드가 제공되는 것이다.