[HTML5] Canvas 2D Transform 과 Path

[원글 - 2012년 이글루스]

이전에 Canvas2D에서 Transform에 대해서 설명하면서 

마지막에 Transform은 그리려는 객체에 적용되지 않고, Canvas자체에 적용된다고 했다

다시말하면 아래 그림과 같이 생각하면 된다

(출처 : http://www.w3schools.com/html5/canvas_translate.asp )

위 그림에서처럼 만약 Translate를 적용시킨다면,

사각형을 이동해서 그리는 것이 아닌, Canvas 자체를 이동시킨다

이것은 회전이나, 다른 Transform도 마찬가지이다.

이를 확실하게 알 수 있는 방법은 바로 Path를 이용해서 그림을 그려보는 방법이다

아래와 코드와 같이 Path를 이용하여 별 모양을 그려보도록 하자

function drawStar( pContext )
{
    // pContext는 Canvas에서 getContext("2d")로 얻어온 그 것

    var vtx = [
        { "x" :  0.000, "y" : -1.000 },
        { "x" :  0.951, "y" : -0.309 },
        { "x" :  0.588, "y" :  0.809 },
        { "x" : -0.588, "y" :  0.809 },
        { "x" : -0.951, "y" : -0.309 }
    ];

    pContext.beginPath();
    pContext.moveTo( vtx[0].x, vtx[0].y );
    pContext.lineTo( vtx[2].x, vtx[2].y );
    pContext.lineTo( vtx[4].x, vtx[4].y );
    pContext.lineTo( vtx[1].x, vtx[1].y );
    pContext.lineTo( vtx[3].x, vtx[3].y );
    pContext.closePath();
        
    pContext.stroke();
    pContext.fill();
}

translate를 이용하여 화면 한 가운데 별을 그려보면 아래와 같다 (그림판으로 8배 확대했다)

좌표에서 예상할 수 있듯이 확실하게 찍힌 검은색 2 by 2 pixel과 

Anti-alias 효과를 위한 듯이 보이는 주변 회색 pixel들이 보인다

위 별의 좌표는 반지름이 1인 원 위의 5개의 점을 선으로 이은 것이다.

만일 Transform이 각 그려지는 객체에 적용된다면, 만약 Scale을 통해서 5배로 확대할 경우,

약 10 Pixel 정도의 크기를 가진 별이 그려져야 옳은 결과다

하지만 아래 그림을 보자 ( 5배 확대 후 사진 - 역시 그림판으로 8배 확대 )

쭉 새어보면 세로 픽셀이 25픽셀 20 픽셀이 넘어간다 어떻게 된 일일까?

바로 Canvas자체를 Scale하기 때문이다.

다시 제일 처음 확대하기 전의 별 그림을 기억해 보자

회색 pixel까지 합쳐서 세로가 약 5 pixel 정도가 된다

그것의 5배 25 pixel 이렇게 계산하면 맞아 떨어진다

즉, 앞서 말했듯이 그려지는 객체에 대해서 확대가 일어나는 것이 아닌,

Canvas 자체의 크기를 늘리는 것이다

이런 부분은 당연한 이야기지만, Document를 잘 찾아보면 언급되어 있는 부분이다

다만, Path 사용 중에 이 사실을 깜빡하는 경우가 있어서 이렇게 예를 보이며 작성해 보았다

따라서 저렇게 좌표를 이용해서 Path( 결국은 polygon )을 그려준다면

좌표 변환을 적용하여 그려주는 것이 좋다

이동이나, 회전 등은 그다지 주의하지 않아도 될 법 하지만

위에서 본 Scale (확대/축소)의 경우는 그 결과가 크게 차이가 나기 때문에

사용하는데 주의 해야 할 것이다