HTML Canvas – 좌표

HTML Canvas 좌표 시스템

Canvas에서 그래픽을 정확하게 배치하려면 좌표 시스템을 이해해야 한다. Canvas 요소는 x와 y 좌표를 사용하여 모든 그래픽 요소의 위치를 결정한다.

Canvas 좌표 기본 개념

HTML Canvas 요소의 좌표 시스템은 화면의 왼쪽 상단 모서리를 원점으로 사용한다. 모든 요소의 위치는 이 원점을 기준으로 측정된다.

Canvas의 좌표 체계에서:

• x 좌표: 왼쪽에서 오른쪽으로 증가한다
• y 좌표: 위에서 아래로 증가한다

💡 좌표 시스템 팁:
• 왼쪽 상단 모서리는 항상 (0,0) 좌표이다.
• x 값이 커질수록 위치는 오른쪽으로 이동한다.
• y 값이 커질수록 위치는 아래로 이동한다.

Canvas 좌표 시스템 시각화

다음 예제 코드는 Canvas에 눈금선과 좌표를 표시하여 좌표 시스템을 시각화한다.

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

for (var y = 0; y < c.height; y += 10) {
  ctx.moveTo(0, y);
  ctx.lineTo(c.width, y);
}
for (var x = 0; x < c.width; x += 10) {
  ctx.moveTo(x, 0);
  ctx.lineTo(x, c.height);
}
ctx.strokeStyle = "#eee";
ctx.stroke();
ctx.beginPath();
ctx.arc(100, 100, 5, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
ctx.font = "12px Arial";
ctx.fillStyle = "black";
ctx.fillText("(100,100)", 105, 105);[/code]



좌표 위치에 따른 도형 그리기
다음은 Canvas의 특정 좌표에 다양한 도형을 그리는 예제이다.
사각형 그리기 (fillRect)
fillRect(x, y, width, height) 메소드는 채워진 사각형을 그린다. 매개변수 x와 y는 사각형의 왼쪽 상단 모서리 좌표이다.
[code lang="js"]var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.fillStyle = "#FF0000";

ctx.fillRect(20, 20, 75, 50);

ctx.fillStyle = "#0000FF";

ctx.fillRect(50, 100, 75, 50);

선 그리기 (moveTo, lineTo)

moveTo(x, y)는 시작점을 지정하고, lineTo(x, y)는 끝점을 지정한다.

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(0, 0);

ctx.lineTo(200, 100);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(50, 50);

ctx.lineTo(200, 50);

ctx.strokeStyle = "red";

ctx.stroke();

원 그리기 (arc)

arc(x, y, radius, startAngle, endAngle) 메소드에서 x와 y는 원의 중심점 좌표이다.

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.arc(100, 50, 40, 0, 2 * Math.PI);

ctx.stroke();

ctx.beginPath();

ctx.arc(70, 150, 30, 0, 2 * Math.PI);

ctx.fillStyle = "green";

ctx.fill();

텍스트 그리기 (fillText)

fillText(text, x, y) 메소드에서 x와 y는 텍스트의 위치를 지정한다.

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.font = "20px Arial";

ctx.fillText("Hello World", 50, 50);

ctx.fillText("Canvas Coordinates", 50, 100);

Canvas 좌표 변환

더 복잡한 그래픽 작업을 위해 Canvas 좌표 시스템을 변환할 수 있다.

translate() 메소드 사용 예

translate() 메소드는 Canvas의 원점(0,0)을 다른 위치로 이동한다.

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.fillStyle = "red";

ctx.fillRect(10, 10, 50, 50);

ctx.translate(100, 50);

ctx.fillStyle = "blue";

ctx.fillRect(10, 10, 50, 50);

요소 위치의 동적 계산

Canvas의 크기나 다른 요소의 위치를 기반으로 요소의 위치를 동적으로 계산할 수 있다.

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var centerX = c.width / 2;

var centerY = c.height / 2;

ctx.beginPath();

ctx.arc(centerX, centerY, 40, 0, 2 * Math.PI);

ctx.fillStyle = "purple";

ctx.fill();

ctx.beginPath();

ctx.moveTo(0, 0);

ctx.lineTo(c.width, c.height);

ctx.strokeStyle = "green";

ctx.stroke();

마우스 이벤트와 좌표

마우스 이벤트를 사용하여 사용자 상호작용에 따라 Canvas에 그림을 그릴 수 있다.

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

c.addEventListener("click", function(event) {

  var rect = c.getBoundingClientRect();

  var x = event.clientX - rect.left;

  var y = event.clientY - rect.top;

  ctx.beginPath();

  ctx.arc(x, y, 10, 0, 2 * Math.PI);

  ctx.fillStyle = "orange";

  ctx.fill();

});

💡 Canvas 이벤트 처리 시 주의점:
• getBoundingClientRect() 메소드를 사용하여 Canvas 요소의 실제 위치를 찾아야 한다.
• 원하는 좌표를 얻기 위해 마우스 이벤트의 좌표에서 Canvas의 오프셋을 빼야 한다.
• 페이지가 스크롤될 때 추가적인 오프셋 보정이 필요할 수 있다.

좌표 시스템 활용 기법

Canvas 좌표 시스템을 효과적으로 활용하기 위한 몇 가지 기법은 다음과 같다.

• 상대적 위치 계산: 다른 요소의 위치를 기준으로 상대적인 위치 계산
• 비율 기반 배치: Canvas 크기에 비례하여 요소 배치
• 그리드 시스템 구현: 균일한 배치를 위한 그리드 시스템 활용
• 좌표 변환: 복잡한 도형을 그리기 위한 좌표 변환 활용

Canvas의 좌표 시스템을 이해하면 정확한 위치에 그래픽을 배치하고 복잡한 시각적 요소를 구현할 수 있다. 기본 원칙은 단순하지만 translate, scale, rotate와 같은 변환 메소드를 사용하면 훨씬 더 복잡하고 다양한 그래픽 표현이 가능하다.