[그래픽 처리] 변형 행렬의 이동과 확대/축소/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()..
더보기
[그래픽 처리] 렌더링 메서드/arc(), arcTo()/quadraticCurveTo(), bezieCurveTo()/rect()
[그래픽 처리] 렌더링 메서드/arc(), arcTo()/quadraticCurveTo(), bezieCurveTo()/rect() [1] 원호 렌더링 - arc(), arcTo() 1. arc() 메서드 context.arc(x, y, 반경, 시작 각도, 종료 각도, 반시계방향 지정) 여기서 '반시계 방향 지정'을 true로 하면 시계방향으로 원호를 그립니다. 각도는 '라디안(radian)'이므로 '도(degree)'를 '라디안(rad)'으로 변환해야 할 때 아래의 계산식을 사용하면 됩니다. var rad = deg*Math.PI / 180; arc() 메서드로 원호를 그리는 프로그램 예제입니다. ※stroke() : 패스의 테두리 렌더링 원호가 아닌 완전한 원을 그리고 싶을 때는 arc() 메서드의 ..
더보기