[ HTML 5 ] Canvas Transform

출처:  http://aslike.egloos.com/2898232 

Canvas2D의 변환은 여타 3D API에서 제공하는 변환처럼 행렬로 처리된다 

동차 좌표계를 포함 Canvas2D에 사용되는 행렬은 3 by 3 행렬이 된다.

변환 할 좌표를 x, y 라 하고, 최종 변환 된 좌표를 x', y' 이라고 했을 때,

변환 공식은 다음과 같다.

위쪽은 OpenGL을 많이 다뤄본 사람들에게 익숙한 행렬 곱 표현 방법이고

아래쪽은 DirectX를 많이 다뤄본 사람들에게 익숙한 행렬 곱 표현 방법이다

어느쪽이든 결과는 같다

눈치 빠른 사람은 눈치 챘으리라고 생각하지만

위 그림의 행렬에서 a, b, c, d, e, f는  위에서 설명한 함수 중

transform( a, b, c, d, e, f )

setTransform( a, b, c, d, e, f )

두 함수의 패러미터 a, b, c, d, e, f 이다

사실 상 변환에는 행렬에서 저 6개의 값만 사용된다.

많은 사이트 들이 

패러미터를 다음과 같이 정의한다

a :  scale-x

b :  skew-x

c :  skew-y

d :  scale-y

e :  translate-x

f  :  translate-y 

정말 좋은 정보라서 퍼왔습니다. 히힛^^;;