설정 저장과 불러오기

save(); // stack처럼 여러번 저장이 가능
restore(); // 최근에 저장한 것부터 불러오기

ctx.fillStyle = '#000'; // 검정
ctx.fillRect(0, 0, 150, 150); // 제일 바깥
ctx.save();

ctx.fillStyle = '#38F'; // 파랑
ctx.fillRect(15, 15, 120, 120); // 안쪽 사각
ctx.save();

ctx.fillStyle = '#F88'; //빨강
ctx.fillRect(30, 30, 90, 90); // 더 안쪽 사각

ctx.restore(); // 파랑 복원
ctx.fillRect(45, 45, 60, 60);

ctx.restore(); // 검정 복원
ctx.fillRect(60, 60, 30, 30);

변환

translate

translate(x축 이동, y축 이동);

for (var i = 0; i < 5; i++) {
  for (var j = 0; j < 5; j++) {
    ctx.save(); // translate를 save에서 수행하고 restore로 날려버림. 안그러면 밀기가 계속 쌓임
    ctx.fillStyle = `rgb(${(51 * i)}, ${(255 - 51 * j)}, 255)`;
    ctx.translate(10 + j * 30, i * 30);
    ctx.fillRect(0, 0, 25, 25);
    ctx.restore();
  }
}

rotating

ratate(각도(라디안)); // 원점 기준 시계방향으로 회전

// 원점 중심으로 회전하기 예제(25도)
ctx.save();
ctx.fillStyle = '#0095DD';  // 파란 사각형
ctx.fillRect(30, 30, 100, 100);
ctx.rotate((Math.PI / 180) * 25);

ctx.fillStyle = '#4D4E53';  // 회색 사각형
ctx.fillRect(30, 30, 100, 100);
ctx.restore();

// 도형 중심으로 회전하기 예제(25도)
ctx.save();
ctx.fillStyle = '#0095DD';  // 파란 사각형
ctx.fillRect(150, 30, 100, 100);

ctx.translate(200, 80); // 사각형 중심으로 이동하기
ctx.rotate((Math.PI / 180) * 25); // 회전
ctx.translate(-200, -80); // 예전 위치로 이동하기

ctx.fillStyle = '#4D4E53'; // 회색 사각형
ctx.fillRect(150, 30, 100, 100);
ctx.restore();

scale

scale(x확대율, y확대율); // 응용 : -1을 넣어 뒤집힌 효과도 가능

ctx.fillRect(1, 10, 10, 10); // 원본
ctx.save();
ctx.scale(10, 3);
ctx.fillRect(1, 10, 10, 10); // 짭
ctx.restore();

// 수평으로 대칭하기
ctx.scale(-1, 1);
ctx.font = '48px serif';
ctx.textAlign = 'end';  // 뒤집힌 좌표기 때문에 2사분면이 출력됨에 유의!
ctx.fillText('안녕하세요.', 0, 120);

transforms

이동, 확대축소, 회전을 한번에 지정할 수 있는 행렬입니다.

a : x 확대/축소
b : x 기울기
c : y 기울기
d : y 확대/축소
e : x 이동
f : y 이동

// 검정 색상 예제
ctx.translate(100, 100);    // 중심점을 이동

var sin = Math.sin(Math.PI / 6); // 30도
var cos = Math.cos(Math.PI / 6);
var c = 0;
for (var i = 0; i <= 12; i++) {
  c = Math.floor(255 / 13 * i);   // 색상정보엔 정수가 들어가야 함(내림)
  ctx.fillStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
  ctx.fillRect(0, 0, 100, 10);
  ctx.transform(cos, sin, -sin, cos, 0, 0);
}

// 핑크 색 예제
ctx.setTransform(-1, 0, 0, 1, 110, 110);    // 중심 (110,110), x축반전
ctx.fillStyle = 'rgba(255, 128, 255, 0.5)';
ctx.fillRect(0, 0, 50, 50);
    D_Transform > b4_transform.html

    예제파일
    

    
마스크
    

      clip(); // 자르기

    
    
ctx.fillRect(0, 0, 150, 150);   // 검정배경

// 동그란 모양의 잘라내기 경로를 생성한다
ctx.beginPath();
ctx.arc(75, 75, 60, 0, Math.PI * 2, true);
ctx.clip();

...(중략)...

// 별 50개 (보이는 갯수는 랜덤)
for (var j = 0; j < 50; j++) {
  ctx.save();
  ctx.fillStyle = '#fff';
  ctx.translate(Math.floor(Math.random() * 150), Math.floor(Math.random() * 150));
  drawStar(ctx, Math.floor(Math.random() * 4) + 2);
  ctx.restore();
}
    

      새로고침 할 때마다 별의 위치와 갯수가 달리 보이는 예제
    
    D_Transform > c_clip.html
    예제파일