[그래픽 처리] 변형 행렬의 이동과 확대/축소
translate()메서드와 scale()메서드를 이용해보도록 하겠습니다.
좌표 (20,20)에 크기가 (50,50)인 사각형을 렌더링하는 drawRect() 메서드를 만듭니다.
function drawRect(context, color){
context.fillStyle=color;
context.fillRect(20,20,50,50);
}
context.fillStyle=color;
context.fillRect(20,20,50,50);
}
//빨간 사각형은 그냥 호출하고,
drawRect(ctx, "red");
//파란 사각형은 transform() 메서드로 평행이동 시키고, scale() 메서드로 가로를 확대하고 세로를 축소하였습니다.
//이동 및 확대/축소를 지정하여 렌더링
ctx.translate(30,30); //평행이동
ctx.scale(2.5, 0.8); //확대/축소
drawRect(ctx,"blue");
drawRect(ctx, "red");
//파란 사각형은 transform() 메서드로 평행이동 시키고, scale() 메서드로 가로를 확대하고 세로를 축소하였습니다.
//이동 및 확대/축소를 지정하여 렌더링
ctx.translate(30,30); //평행이동
ctx.scale(2.5, 0.8); //확대/축소
drawRect(ctx,"blue");
이 처럼 변형 행렬은 수평이동과 확대/축소를 한꺼번에 적용시킬 수 있습니다.
'HTML5' 카테고리의 다른 글
[그래픽 처리] CSS3/글자 그림자/그림 그림자/box-shadow/text-shadow/변형 (0) | 2012.02.13 |
---|---|
[그래픽 처리] 애니메이션/setInterval() (0) | 2012.02.10 |
[그래픽 처리] 변형 행렬의 저장과 복구/회전/save()/restore()/rotate() (0) | 2012.02.10 |
[그래픽 처리] 변형 행렬 메서드/setTransform()/transform()/rotate()/scale()/translate()/save()/restore() (0) | 2012.02.10 |
[그래픽 처리] 그래프 렌더링/꺽은선 그래프/모눈종이 (0) | 2012.02.10 |
[그래픽 처리] 그림 파일 렌더링/drawImage() (0) | 2012.02.09 |
[그래픽 처리] 컨텍스트(Context)의 속성 (0) | 2012.02.09 |