HTML Canvas – 텍스트

HTML Canvas 텍스트

HTML Canvas는 캔버스에 텍스트를 그릴 수 있는 강력한 기능을 제공한다. 텍스트를 그리고, 스타일을 적용하고, 정렬하는 다양한 방법을 알아보자.

텍스트 그리기 메서드

Canvas에서 텍스트를 그리는 두 가지 주요 메서드가 있다.

• fillText(text, x, y) – 채워진 텍스트를 그린다
• strokeText(text, x, y) – 텍스트의 윤곽선만 그린다

매개변수	설명
text	그릴 텍스트 문자열
x	텍스트 시작 위치의 x 좌표
y	텍스트 기준선의 y 좌표

기본 텍스트 그리기

fillText() 메서드를 사용하여 기본 텍스트를 그릴 수 있다.

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

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

</canvas>

<script>

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

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

  ctx.font = "30px Arial";

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

</script>

이 예제는 Arial 폰트 30픽셀 크기로 “Hello World” 텍스트를 그린다. font 속성으로 폰트 스타일을 설정한다.

텍스트 윤곽선 그리기

strokeText() 메서드를 사용하여 텍스트의 윤곽선만 그릴 수 있다.

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

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

</canvas>

<script>

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

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

  ctx.font = "30px Arial";

  ctx.strokeText("Hello World", 10, 50);

</script>

이 예제는 텍스트의 윤곽선만 그려서 속이 비어있는 텍스트를 만든다.

텍스트 색상 설정

fillStyle과 strokeStyle 속성을 사용하여 텍스트 색상을 설정할 수 있다.

<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.font = "30px Arial";

  ctx.fillStyle = "red";

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

  ctx.strokeStyle = "blue";

  ctx.strokeText("Hello World", 10, 100);

</script>

이 예제는 빨간색으로 채워진 텍스트와 파란색 윤곽선을 가진 텍스트를 보여준다.

폰트 설정

font 속성을 사용하여 폰트 크기, 스타일, 패밀리를 설정할 수 있다.

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

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

</canvas>

<script>

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

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

  ctx.font = "italic bold 20px Arial";

  ctx.fillText("Italic Bold", 10, 30);

  ctx.font = "20px Georgia";

  ctx.fillText("Georgia Font", 10, 60);

  ctx.font = "small-caps 20px Verdana";

  ctx.fillText("Small Caps", 10, 90);

</script>

이 예제는 다양한 폰트 스타일과 패밀리를 적용한 텍스트를 보여준다.

텍스트 정렬

textAlign 속성을 사용하여 텍스트의 수평 정렬을 설정할 수 있다.

<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.strokeStyle = "red";

  ctx.moveTo(150, 0);

  ctx.lineTo(150, 150);

  ctx.stroke();

  ctx.font = "20px Arial";

  ctx.textAlign = "start";

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

  ctx.textAlign = "center";

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

  ctx.textAlign = "end";

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

  ctx.textAlign = "left";

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

</script>

이 예제는 빨간색 기준선을 중심으로 다양한 textAlign 값의 효과를 보여준다.

텍스트 베이스라인

textBaseline 속성을 사용하여 텍스트의 수직 정렬을 설정할 수 있다.

<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");

  ctx.strokeStyle = "red";

  ctx.moveTo(0, 75);

  ctx.lineTo(300, 75);

  ctx.stroke();

  ctx.font = "20px Arial";

  ctx.textBaseline = "top";

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

  ctx.textBaseline = "middle";

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

  ctx.textBaseline = "bottom";

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

  ctx.textBaseline = "alphabetic";

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

</script>

이 예제는 빨간색 기준선을 중심으로 다양한 textBaseline 값의 효과를 보여준다.

그라데이션 텍스트

그라데이션을 fillStyle로 설정하여 그라데이션 효과가 있는 텍스트를 만들 수 있다.

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

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

</canvas>

<script>

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

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

  var gradient = ctx.createLinearGradient(0, 0, 300, 0);

  gradient.addColorStop(0, "magenta");

  gradient.addColorStop(0.5, "blue");

  gradient.addColorStop(1, "red");

  ctx.font = "40px Arial";

  ctx.fillStyle = gradient;

  ctx.fillText("Gradient", 30, 80);

</script>

이 예제는 마젠타에서 파랑, 빨강으로 변하는 선형 그라데이션이 적용된 텍스트를 만든다.

텍스트와 윤곽선 조합

fillText()와 strokeText()를 함께 사용하여 채우기와 윤곽선이 모두 있는 텍스트를 만들 수 있다.

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

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

</canvas>

<script>

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

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

  ctx.font = "40px Arial";

  ctx.fillStyle = "yellow";

  ctx.fillText("Canvas", 50, 80);

  ctx.strokeStyle = "black";

  ctx.lineWidth = 2;

  ctx.strokeText("Canvas", 50, 80);

</script>

이 예제는 노란색으로 채워지고 검은색 윤곽선을 가진 텍스트를 만든다.

텍스트 크기 측정

measureText() 메서드를 사용하여 텍스트의 너비를 측정할 수 있다.

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

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

</canvas>

<script>

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

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

  ctx.font = "30px Arial";

  var text = "Hello World";

  ctx.fillText(text, 10, 50);

  var metrics = ctx.measureText(text);

  ctx.strokeStyle = "red";

  ctx.strokeRect(10, 20, metrics.width, 40);

</script>

이 예제는 텍스트의 너비를 측정하고 그 크기만큼 빨간색 사각형을 그려서 텍스트 경계를 표시한다.

💡 텍스트 그리기 팁:
• font 속성은 CSS 폰트 문법과 동일하다 (예: “italic bold 20px Arial”)
• textAlign의 기본값은 “start”이고, textBaseline의 기본값은 “alphabetic”이다
• measureText()는 텍스트의 너비만 반환하며, 높이는 제공하지 않는다

여러 줄 텍스트

Canvas는 자동 줄바꿈을 지원하지 않으므로 여러 줄 텍스트는 수동으로 구현해야 한다.

<canvas id="myCanvas10" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas10");
var ctx = c.getContext("2d");
ctx.font = "20px Arial";
var lines = ["First Line", "Second Line", "Third Line"];
var lineHeight = 25;
for (var i = 0; i < lines.length; i++) { ctx.fillText(lines[i], 10, 30 + i * lineHeight); } </script>[/code]

이 예제는 배열과 반복문을 사용하여 여러 줄 텍스트를 구현한다.

Canvas의 텍스트 기능을 활용하면 다양한 텍스트 효과와 레이아웃을 만들 수 있다. 그라데이션, 색상, 정렬 등을 조합하여 시각적으로 매력적인 텍스트를 구현할 수 있다.