Transformations

Transformations

 

• scale(scalewidth, scaleheight)
  - 현재 드로잉의 좌표 공간을 수평/수직 방향으로 확대/축소하는 메소드
  - scalewidth/scaleheight 수치는 1을 100%로 하여 배율로 지정한다.
  - 이미 scale()이 적용되었을 경우 이후의 모든 드로잉에 동일한 비율로 적용이 된다.
  - scale 메서드를 연속하여 사용할 경우 초기값 기준이 아닌, 전에 정의한 좌표 공간의 값 기준으로 중첩되어 사용된다.
  - 음수값을 사용하면 진행 방향이 반대로 그려진다.
  

  const canvas30 = document.getElementById('canvas30');
  const ctx30 = canvas30.getContext('2d');
  
  ctx30.strokeRect(50,50,100,100);
  ctx30.scale(2,2);
  ctx30.strokeStyle='red';ctx30.strokeRect(50,50,100,100);
  ctx30.strokeStyle='green';ctx30.strokeRect(100,100,100,100);
  ctx30.scale(0.5,0.5);
  ctx30.strokeStyle='blue';ctx30.strokeRect(50,500,100,100);​

• rotate(angle)
  - 현재 드로잉의 좌표 공간을 시계방향으로 회전하는 메소드
  - angle은 라디안을 사용하므로 (각도*Math.PI/180)으로 지정하면 쉽게 적용할 수 있다.
  - 회전의 중심점은 언제나 Canvas 원점이다. 중심점을 바꾸려면 translate()를 사용하여 Canvas를 이동해야 한다.
  

  const canvas31 = document.getElementById('canvas31');
  const ctx31 = canvas31.getContext('2d');
  ctx31.rotate((Math.PI/180)*45);
  ctx31.fillStyle = 'rgba(0,0,0,.5)';
  ctx31.fillRect(250,150,100,100);​

• translate(x,y)
  - 캔버스의 기준 좌표를 이동하는 메소드
  - 캔버스의 원점의 좌표가 이동하게 된다.
  - 캔버스 객체 자체가 이동하는 것이 아니고, 캔버스 객체 안에 기준 좌표만 바뀐다.
  

  const canvas32 = document.getElementById('canvas32');
  const ctx32 = canvas32.getContext('2d');
  
  ctx32.globalAlpha = .5;
  ctx32.fillRect(0,0,100,50);
  
  ctx32.translate(100,100);
  ctx32.fillStyle='coral';ctx32.fillRect(0,0,100,50);
  ctx32.translate(-100,-100);
  ctx32.fillStyle='cornflowerblue';ctx32.fillRect(100,50,100,50);​

• save()
  - Canvas의 모든 상태를 저장하는 메소드
  - 현재 드로잉 상태의 정보(그리기 속성 정보)를 스택에 저장한다.
  - save() 메소드가 호출될 때마다 현재 drawing 상태가 스택 위로 푸시된다.
  - 저장되는 범위
    ▷ 이전부터 적용된 변형 (translate, rotate, scale 등)
    ▷ 현재의 clipping path
    ▷ 그 외 스타일 속성들의 현재 값 (선 스타일, 채우기 스타일, 그림자 등)
  

  const canvas33 = document.getElementById('canvas33');
  const ctx33 = canvas33.getContext('2d');
  
  ctx33.fillStyle='cornflowerblue';ctx33.fillRect(150,50,300,300);
  ctx33.save();
  
  ctx33.fillStyle='coral';ctx33.fillRect(200,100,200,200);
  ctx33.save();
  
  ctx33.fillStyle='bisque';ctx33.fillRect(250,150,100,100);
  
  ctx33.restore();ctx33.fillRect(275,175,50,50);
  ctx33.restore();ctx33.fillRect(290,190,20,20);​

• restore()
  - 가장 최근에 저장된 canvas 상태를 복원하는 메소드
  

  const canvas34 = document.getElementById('canvas34');
  const ctx34 = canvas34.getContext('2d');
  ctx34.globalAlpha = .5;
  
  ctx34.save();
  ctx34.fillStyle='cornflowerblue';ctx34.fillRect(150,150,100,100);
  ctx34.rotate(25*(Math.PI/180));
  ctx34.fillStyle='coral';ctx34.fillRect(150,150,100,100);
  ctx34.restore();
  
  ctx34.fillStyle='cornflowerblue';ctx34.fillRect(350,150,100,100);
  ctx34.translate(400,200);
  ctx34.rotate(25*(Math.PI/180));
  ctx34.translate(-400,-200);
  ctx34.fillStyle='coral';ctx34.fillRect(350,150,100,100);​