Mingg's Diary

HTML Canvas 텍스트 정렬

HTML Canvas에서는 textAlign과 textBaseline 속성을 사용하여 텍스트의 정렬 방식을 제어할 수 있다. 이를 통해 텍스트를 원하는 위치에 정확하게 배치할 수 있다.

수평 정렬 (textAlign)

textAlign 속성은 텍스트의 수평 정렬 방식을 설정한다. 지정된 x 좌표를 기준으로 텍스트가 어떻게 배치될지 결정한다.

값	설명
start	기본값. 텍스트 방향에 따라 left 또는 right와 같음
end	텍스트 방향에 따라 right 또는 left와 같음
left	텍스트가 지정된 위치에서 왼쪽으로 정렬
right	텍스트가 지정된 위치에서 오른쪽으로 정렬
center	텍스트가 지정된 위치를 중심으로 정렬

textAlign 예제

<canvas id="myCanvas1" width="300" height="200" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

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

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

  ctx.strokeStyle = "red";

  ctx.moveTo(150, 0);

  ctx.lineTo(150, 200);

  ctx.stroke();

  ctx.font = "16px Arial";

  ctx.textAlign = "start";

  ctx.fillText("start", 150, 30);

  ctx.textAlign = "end";

  ctx.fillText("end", 150, 60);

  ctx.textAlign = "left";

  ctx.fillText("left", 150, 90);

  ctx.textAlign = "right";

  ctx.fillText("right", 150, 120);

  ctx.textAlign = "center";

  ctx.fillText("center", 150, 150);

</script>

이 예제는 빨간색 기준선(x=150)을 중심으로 다양한 textAlign 값의 효과를 보여준다. 각 텍스트가 기준선을 기준으로 어떻게 정렬되는지 확인할 수 있다.

수직 정렬 (textBaseline)

textBaseline 속성은 텍스트의 수직 정렬 방식을 설정한다. 지정된 y 좌표를 기준으로 텍스트가 어떻게 배치될지 결정한다.

값	설명
alphabetic	기본값. 일반적인 알파벳 기준선
top	텍스트의 상단이 지정된 y 위치에 맞춤
hanging	hanging 기준선(일부 스크립트용)
middle	텍스트의 중앙이 지정된 y 위치에 맞춤
ideographic	ideographic 기준선(한자 등)
bottom	텍스트의 하단이 지정된 y 위치에 맞춤

textBaseline 예제

<canvas id="myCanvas2" width="400" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

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

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

  ctx.strokeStyle = "red";

  ctx.moveTo(0, 75);

  ctx.lineTo(400, 75);

  ctx.stroke();

  ctx.font = "16px Arial";

  ctx.textBaseline = "top";

  ctx.fillText("top", 10, 75);

  ctx.textBaseline = "hanging";

  ctx.fillText("hanging", 60, 75);

  ctx.textBaseline = "middle";

  ctx.fillText("middle", 130, 75);

  ctx.textBaseline = "alphabetic";

  ctx.fillText("alphabetic", 190, 75);

  ctx.textBaseline = "ideographic";

  ctx.fillText("ideographic", 270, 75);

  ctx.textBaseline = "bottom";

  ctx.fillText("bottom", 350, 75);

</script>

이 예제는 빨간색 기준선(y=75)을 중심으로 다양한 textBaseline 값의 효과를 보여준다. 각 텍스트가 기준선을 기준으로 어떻게 배치되는지 확인할 수 있다.

중앙 정렬 텍스트

textAlign과 textBaseline을 조합하여 캔버스의 정중앙에 텍스트를 배치할 수 있다.

<canvas id="myCanvas3" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

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

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

  ctx.strokeStyle = "lightgray";

  ctx.moveTo(150, 0);

  ctx.lineTo(150, 150);

  ctx.moveTo(0, 75);

  ctx.lineTo(300, 75);

  ctx.stroke();

  ctx.font = "30px Arial";

  ctx.textAlign = "center";

  ctx.textBaseline = "middle";

  ctx.fillStyle = "blue";

  ctx.fillText("CENTER", 150, 75);

</script>

이 예제는 캔버스의 정중앙에 텍스트를 배치한다. 회색 십자선이 중심점을 표시한다.

다양한 정렬 조합

textAlign과 textBaseline의 다양한 조합을 사용하여 9가지 위치에 텍스트를 배치할 수 있다.

<canvas id="myCanvas4" width="300" height="200" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

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

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

  ctx.strokeStyle = "lightgray";

  ctx.moveTo(100, 0);

  ctx.lineTo(100, 200);

  ctx.moveTo(200, 0);

  ctx.lineTo(200, 200);

  ctx.moveTo(0, 50);

  ctx.lineTo(300, 50);

  ctx.moveTo(0, 150);

  ctx.lineTo(300, 150);

  ctx.stroke();

  ctx.font = "14px Arial";

  ctx.textAlign = "left";

  ctx.textBaseline = "top";

  ctx.fillText("left-top", 100, 50);

  ctx.textAlign = "center";

  ctx.textBaseline = "top";

  ctx.fillText("center-top", 150, 50);

  ctx.textAlign = "right";

  ctx.textBaseline = "top";

  ctx.fillText("right-top", 200, 50);

  ctx.textAlign = "left";

  ctx.textBaseline = "middle";

  ctx.fillText("left-middle", 100, 100);

  ctx.textAlign = "center";

  ctx.textBaseline = "middle";

  ctx.fillText("center-middle", 150, 100);

  ctx.textAlign = "right";

  ctx.textBaseline = "middle";

  ctx.fillText("right-middle", 200, 100);

  ctx.textAlign = "left";

  ctx.textBaseline = "bottom";

  ctx.fillText("left-bottom", 100, 150);

  ctx.textAlign = "center";

  ctx.textBaseline = "bottom";

  ctx.fillText("center-bottom", 150, 150);

  ctx.textAlign = "right";

  ctx.textBaseline = "bottom";

  ctx.fillText("right-bottom", 200, 150);

</script>

이 예제는 3×3 격자에서 9가지 정렬 조합을 보여준다. 각 교차점에서 해당하는 정렬 방식으로 텍스트가 배치된다.

실용적인 텍스트 배치

정렬 속성을 활용하여 실제 애플리케이션에서 유용한 텍스트 배치를 구현할 수 있다.

<canvas id="myCanvas5" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

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

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

  ctx.fillStyle = "lightblue";

  ctx.fillRect(0, 0, 300, 150);

  ctx.fillStyle = "black";

  ctx.font = "20px Arial";

  ctx.textAlign = "left";

  ctx.textBaseline = "top";

  ctx.fillText("Top Left", 10, 10);

  ctx.textAlign = "center";

  ctx.textBaseline = "top";

  ctx.fillText("Top Center", 150, 10);

  ctx.textAlign = "right";

  ctx.textBaseline = "top";

  ctx.fillText("Top Right", 290, 10);

  ctx.textAlign = "center";

  ctx.textBaseline = "middle";

  ctx.fillText("Center", 150, 75);

  ctx.textAlign = "left";

  ctx.textBaseline = "bottom";

  ctx.fillText("Bottom Left", 10, 140);

  ctx.textAlign = "right";

  ctx.textBaseline = "bottom";

  ctx.fillText("Bottom Right", 290, 140);

</script>

이 예제는 실제 UI에서 자주 사용되는 텍스트 배치 패턴을 보여준다.

💡 텍스트 정렬 팁:
• textAlign의 기본값은 “start”이고, textBaseline의 기본값은 “alphabetic”이다
• 정확한 텍스트 위치 지정을 위해서는 두 속성을 모두 설정하는 것이 좋다
• “middle”과 “center”를 조합하면 완벽한 중앙 정렬이 가능하다

동적 정렬 변경

사용자 상호작용에 따라 텍스트 정렬을 동적으로 변경할 수 있다.

<canvas id="myCanvas6" width="300" height="150" style="border:1px solid #d3d3d3;">

  브라우저가 HTML5 Canvas를 지원하지 않습니다.

</canvas>

<script>

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

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

  var alignments = ["left", "center", "right"];

  var currentAlign = 0;

  function drawAlignedText() {

    ctx.clearRect(0, 0, 300, 150);

    ctx.strokeStyle = "red";

    ctx.moveTo(150, 0);

    ctx.lineTo(150, 150);

    ctx.stroke();

    ctx.font = "20px Arial";

    ctx.textAlign = alignments[currentAlign];

    ctx.textBaseline = "middle";

    ctx.fillStyle = "blue";

    ctx.fillText("Dynamic Align", 150, 75);

    ctx.font = "12px Arial";

    ctx.textAlign = "center";

    ctx.fillStyle = "gray";

    ctx.fillText("Current: " + alignments[currentAlign], 150, 120);

  }

  function changeAlignment() {

    currentAlign = (currentAlign + 1) % alignments.length;

    drawAlignedText();

  }

  drawAlignedText();

  setInterval(changeAlignment, 2000);

</script>

이 예제는 2초마다 텍스트 정렬이 left, center, right 순으로 변하는 애니메이션을 보여준다.

Canvas의 텍스트 정렬 기능을 활용하면 텍스트를 정확한 위치에 배치할 수 있다. 이는 차트, 다이어그램, UI 요소 등을 만들 때 매우 유용하다.

참고

W3C School - HTML Canvas Text Alignment

HTML Canvas – 텍스트 정렬

HTML Canvas 텍스트 정렬

수평 정렬 (textAlign)

textAlign 예제

수직 정렬 (textBaseline)

textBaseline 예제

중앙 정렬 텍스트

다양한 정렬 조합

실용적인 텍스트 배치

동적 정렬 변경

참고

댓글 답글 취소