html

HTML - 캔버스 transform 를 이용한 동적변화

1월 17, 2021

캔버스에는 CSS와 마찬가지로 요소를 회전시키거나 확대, 축소, 이동, 기울임 등 다양한 변화를 줄 수 있는 메서드를 제공합니다.

메서드 설 명
scale(x, y) 도형 크기를 배 만큼 확대, 축소
(양수, 음수, 실수 허용)
  • x: 가로 크기를 확대, 축소
  • y: 세로 크기를 확대, 축소
1.0보다 작으면 크기를 줄이고, 크면 크기는 확대
1.0의 값은 단위를 동일한 크기로 유지
rotate(angle) 도형을 Angle 만큼 시계방향으로 회전시킴
회전중심은 항상 캔버스의 0*0지점이 원점입니다.
(원점을 변경하려면 translate() 를 이용하세요)
translate(x, y) 캔버스의 원점을 이동시킴
(왼쪽 상단 모서리가 원점 기준이며 0/0지점임)
  • x: 캔버스에서 x좌표로 이동할 거리
  • y: 캔버스에서 y좌표로 이동할 거리
transform(a, b, c, d, e, f) scale(), rotate(), translate() 를 한 번에 일괄 지정
  • a: 수평 크기를 확대, 축소
  • b: 가로 방향으로 비스듬히 기울이기
  • c: 세로 방향으로 비스듬히 기울기
  • d: 수직 크기를 확대, 축소
  • e: 캔버스에서 x좌표로 원점을 이동할 거리
  • f: 캔버스에서 y좌표로 원점을 이동할 거리
이전에 설정된 값에 영향을 받음
setTransform(a, b, c, d, e, f) scale(), rotate(), translate() 를 한 번에 일괄 지정
  • a: 수평 크기를 확대, 축소
  • b: 가로 방향으로 비스듬히 기울이기
  • c: 세로 방향으로 비스듬히 기울기
  • d: 수직 크기를 확대, 축소
  • e: 캔버스에서 x좌표로 원점을 이동할 거리
  • f: 캔버스에서 y좌표로 원점을 이동할 거리
이전에 설정된 값을 무시하고 transform()을 실행함

 


scale() 크기 조정

도형의 크기를 조정하려면 scale() 를 사용합니다. 값이 1이면 100%, 2이면 200%로 크기 조정되며 실수, 음수를 허용합니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 200;
var context = canvas.getContext('2d');


context.strokeRect(5, 5, 25, 15);

context.scale(2, 2);
context.strokeRect(5, 5, 25, 15);

context.scale(2, 2);
context.strokeRect(5, 5, 25, 15);

context.scale(2, 2);
context.strokeRect(5, 5, 25, 15);
</script>

scale() 는 음수를 사용할 수 있습니다. 음수일 때의 방향은 하단, 오른쪽 모서리가 기준이 됩니다.



rotate() 회전

시계방향으로 회전을 시키며 0*0지점인 상단 왼쪽 모서리가 원점입니다.

<style>
canvas {
  width: 300px;
  height:250px;
  border: 1px solid black;
}
</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');

// 회전하지 않은 사각형
context.strokeRect(50, 50, 50, 30);

// 25도 회전한 사각형
context.rotate(25 * (Math.PI / 180));
context.strokeRect(50, 50, 50, 30);
</script>



위 예제에서 원점이 0*0 지점에서 25도 회전시킨 결과입니다. 원점을 옮기려면 translate()를 사용해야 합니다.



translate() 원점 이동

원점은 항상 왼쪽, 상단입니다. 이것을 이용해 원점을 이동시킬 수 있습니다.

<style>
canvas {
  width: 300px;
  height:250px;
  border: 1px solid black;
}
</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');

// 원점이 0/0 지점
context.strokeRect(50, 50, 50, 30);

// 원점이 80/40 지점 이동
context.translate(80,40);
context.fillStyle = "yellow";
context.strokeRect(50, 50, 50, 30);
</script>


아래 예제는 for문을 이용해 사각형을 여러 개 그리는데, 원점을 50(px)만큼 이동합니다.

<style>
canvas {
  width: 300px;
  height:250px;
  border: 1px solid black;
}
</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 200;
canvas.height = 200;
var context = canvas.getContext('2d');

for (var i = 0; i < 3; i++) {
  for (var j = 0; j < 3; j++) {
    context.save();
    context.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';
    context.translate(10 + j * 50, 10 + i * 50);
    context.fillRect(0, 0, 25, 25);
    context.restore();
  }
}
</script>



transform() 일괄 변경

이 메서드를 이용하면 scale(), translate(), rotate() 를 한 번에 지정할 수 있습니다. setTransform() 는 이전에 설정된 값을 무효로 하고 transform()을 실행한다는 점을 제외하면 동일합니다.

<style>
canvas {
  width: 300px;
  height:250px;
  border: 1px solid black;
}
</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 200;
canvas.height = 200;
var context = canvas.getContext('2d');

// 현재 설정 값
context.transform(3,0.5, -0.5, 1, 30, 10);
context.fillStyle = "yellow";
context.fillRect(0, 0, 250, 100)

// 이전 설정 값을 무효화하고
// 아래 설정 값으로 바꿈
context.setTransform(1,0.5, -0.5, 1, 30, 10);
context.fillStyle = "red";
context.fillRect(0, 0, 250, 100);
// 가로 방향으로 20(px)만큼 이동
context.fillStyle = "blue";
context.fillRect(20, 0, 250, 100);
</script>


아래 예제를 보면 이미지를 2번 삽입하였습니다. 하나는 원본 이미지이고, 두 번째 이미지는 .globalAlpha 를 이용해 0.5로 투명도를 설정하여 반사되는 효과를 주었습니다.

<style>
canvas {
  width: 300px;
  height:250px;
  border: 1px solid black;
}
</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 400;
canvas.height = 200;
var context = canvas.getContext('2d');

var img = new Image();
img.onload = function(){
  // 첫 번째 이미지
  context.drawImage(img, 100,0,140,123);
 
  // 투명도 0.5 지정
context.globalAlpha = 0.5;
  context.transform(1,0,0,-0.5,0,123*1.5);

  // 반사 효과 이미지
  context.drawImage(img, 100,0,140,123);
}
img.src = "http://example.com/image/bobtail-1503869_720.png";
</script>

다음은 무지개 예제입니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id= "mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 200;
canvas.height = 200;
var context = canvas.getContext('2d');

var colors = new Array("red", "orange", "yellow", "green", "blue", "navy", "purple");
context.lineWidth = 10;
for (var i = 0; i < colors.length; i++) {
  context.transform (1,0,0,1,0,10);
  context.strokeStyle = colors[i];
  context.beginPath();
  context.arc(200, 250, 250, 0, 1*Math.PI, true);
  context.stroke();
}
</script>


Tag:

0 Comments

0 댓글