본문 바로가기

HTML5

[그래픽 처리] 변형 행렬 메서드/setTransform()/transform()/rotate()/scale()/translate()/save()/restore()


[그래픽 처리] 변형 행렬 메서드/settransform()/transform()/rotate()/scale()/translate()/save()/restore()

※ 변형 행렬 : 패스의 회전, 이동 및 확대/축소에 관련되는 기능

변형 행렬의 회전/이동 관련 메서드

메서드 설명
setTransform( m11, m12. m21, m22, dx, dy ) 변형 행렬 지정(기존 설정을 지움, 초기화)
transform( m11, m12. m21, m22, dx, dy ) 변형 행렬 지정(중복 지정 가능)
rotate(angle) 회전
scale(x, y) 확대/축소
translate(x, y) 이동/변형



변형 행렬의 저장/복구 관련 메서드

메서드 설명
 save()  변형 행렬의 상태를 저장
 restore()  변형 행렬의 상태를 복구

변형 행렬들은 다른 효과를 중복 지정할 수 있는데,
setTransform() 메서드를 호출하면 기존의 변형 행렬이 모두 초기화된다.