본문 바로가기

나의 플랫폼/HTML5

[ HTML 5 ] Canvas Transform

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
출처:  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 

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