[그래픽 처리] 변형 행렬의 이동과 확대/축소/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, 0.8);  //확대/축소
  drawRect(ctx,"blue");

이 처럼 변형 행렬은 수평이동과 확대/축소를 한꺼번에 적용시킬 수 있습니다.