[그래픽 처리] 변형 행렬의 이동과 확대/축소/translate()/scale()
[그래픽 처리] 변형 행렬의 이동과 확대/축소 translate()메서드와 scale()메서드를 이용해보도록 하겠습니다. 좌표 (20,20)에 크기가 (50,50)인 사각형을 렌더링하는 drawRect() 메서드를 만듭니다. function drawRect(context, color){ context.fillStyle=color; context.fillRect(20,20,50,50); } //빨간 사각형은 그냥 호출하고, drawRect(ctx, "red"); //파란 사각형은 transform() 메서드로 평행이동 시키고, scale() 메서드로 가로를 확대하고 세로를 축소하였습니다. //이동 및 확대/축소를 지정하여 렌더링 ctx.translate(30,30); //평행이동 ctx.scale(2.5,..
더보기
[그래픽 처리] 변형 행렬 메서드/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()..
더보기
