HTML Canvas – 텍스트 색상

HTML Canvas 텍스트 색상

HTML Canvas에서 텍스트에 색상을 적용하는 방법은 매우 다양하다. fillStyle과 strokeStyle 속성을 사용하여 텍스트의 채우기 색상과 윤곽선 색상을 설정할 수 있다.

기본 텍스트 색상 설정

fillStyle 속성을 사용하여 텍스트의 채우기 색상을 설정할 수 있다.

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

  ctx.fillText("Red Text", 10, 50);

</script>

이 예제는 빨간색으로 채워진 텍스트를 그린다. fillStyle 속성은 fillText() 메서드를 호출하기 전에 설정해야 한다.

다양한 색상 형식

Canvas는 여러 가지 색상 형식을 지원한다.

색상 이름 사용

<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 = "20px Arial";

  ctx.fillStyle = "blue";

  ctx.fillText("Blue", 10, 30);

  ctx.fillStyle = "green";

  ctx.fillText("Green", 10, 60);

  ctx.fillStyle = "orange";

  ctx.fillText("Orange", 10, 90);

  ctx.fillStyle = "purple";

  ctx.fillText("Purple", 10, 120);

</script>

이 예제는 표준 색상 이름을 사용하여 다양한 색상의 텍스트를 그린다.

HEX 색상 코드 사용

<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 = "20px Arial";

  ctx.fillStyle = "#FF0000";

  ctx.fillText("#FF0000", 10, 30);

  ctx.fillStyle = "#00FF00";

  ctx.fillText("#00FF00", 10, 60);

  ctx.fillStyle = "#0000FF";

  ctx.fillText("#0000FF", 10, 90);

  ctx.fillStyle = "#FF6600";

  ctx.fillText("#FF6600", 10, 120);

</script>

이 예제는 HEX 색상 코드를 사용하여 정확한 색상을 지정한다.

RGB 색상 값 사용

<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 = "20px Arial";

  ctx.fillStyle = "rgb(255, 0, 0)";

  ctx.fillText("RGB Red", 10, 30);

  ctx.fillStyle = "rgb(0, 255, 0)";

  ctx.fillText("RGB Green", 10, 60);

  ctx.fillStyle = "rgb(0, 0, 255)";

  ctx.fillText("RGB Blue", 10, 90);

  ctx.fillStyle = "rgb(255, 165, 0)";

  ctx.fillText("RGB Orange", 10, 120);

</script>

이 예제는 RGB 형식으로 색상을 지정한다. 각 값은 0-255 범위에서 설정할 수 있다.

투명도가 있는 텍스트 색상

RGBA 형식을 사용하여 투명도가 있는 텍스트를 만들 수 있다.

<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 = "lightgray";

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

  ctx.font = "30px Arial";

  ctx.fillStyle = "rgba(255, 0, 0, 1)";

  ctx.fillText("100%", 10, 40);

  ctx.fillStyle = "rgba(255, 0, 0, 0.7)";

  ctx.fillText("70%", 10, 80);

  ctx.fillStyle = "rgba(255, 0, 0, 0.3)";

  ctx.fillText("30%", 10, 120);

</script>

이 예제는 같은 빨간색이지만 서로 다른 투명도를 가진 텍스트를 보여준다. RGBA의 마지막 값(알파)이 투명도를 결정한다.

텍스트 윤곽선 색상

strokeStyle 속성을 사용하여 텍스트 윤곽선의 색상을 설정할 수 있다.

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

  ctx.strokeStyle = "blue";

  ctx.lineWidth = 2;

  ctx.strokeText("Outline", 10, 50);

  ctx.strokeStyle = "green";

  ctx.lineWidth = 3;

  ctx.strokeText("Thick Outline", 10, 100);

</script>

이 예제는 파란색과 녹색 윤곽선을 가진 텍스트를 그린다. lineWidth 속성으로 윤곽선의 두께를 조절할 수 있다.

채우기와 윤곽선 색상 조합

fillText()와 strokeText()를 함께 사용하여 채우기와 윤곽선 색상을 모두 적용할 수 있다.

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

  ctx.font = "40px Arial";

  ctx.fillStyle = "yellow";

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

  ctx.strokeStyle = "red";

  ctx.lineWidth = 3;

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

  ctx.fillStyle = "lightblue";

  ctx.fillText("Text", 80, 110);

  ctx.strokeStyle = "darkblue";

  ctx.lineWidth = 2;

  ctx.strokeText("Text", 80, 110);

</script>

이 예제는 노란색 채우기와 빨간색 윤곽선을 가진 텍스트, 그리고 연파랑 채우기와 진파랑 윤곽선을 가진 텍스트를 보여준다.

그라데이션 텍스트 색상

그라데이션을 fillStyle로 설정하여 그라데이션 색상의 텍스트를 만들 수 있다.

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

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

  gradient.addColorStop(0, "red");

  gradient.addColorStop(0.5, "yellow");

  gradient.addColorStop(1, "blue");

  ctx.font = "40px Arial";

  ctx.fillStyle = gradient;

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

</script>

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

방사형 그라데이션 텍스트

방사형 그라데이션을 사용하여 중심에서 바깥쪽으로 색상이 변하는 텍스트를 만들 수 있다.

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

  var gradient = ctx.createRadialGradient(150, 75, 10, 150, 75, 100);

  gradient.addColorStop(0, "white");

  gradient.addColorStop(0.5, "orange");

  gradient.addColorStop(1, "red");

  ctx.font = "30px Arial";

  ctx.fillStyle = gradient;

  ctx.textAlign = "center";

  ctx.fillText("Radial Text", 150, 85);

</script>

이 예제는 중심이 흰색이고 바깥쪽이 빨간색인 방사형 그라데이션이 적용된 텍스트를 만든다.

💡 텍스트 색상 팁:
• fillStyle과 strokeStyle은 텍스트를 그리기 전에 설정해야 한다
• RGBA를 사용하면 투명도 효과를 쉽게 만들 수 있다
• 그라데이션은 텍스트뿐만 아니라 다른 도형에도 적용할 수 있다

동적 색상 변경

JavaScript를 사용하여 동적으로 텍스트 색상을 변경할 수 있다.

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

  var colors = ["red", "green", "blue", "orange", "purple"];

  var colorIndex = 0;

  function drawColorfulText() {

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

    ctx.font = "40px Arial";

    ctx.fillStyle = colors[colorIndex];

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

    colorIndex = (colorIndex + 1) % colors.length;

  }

  setInterval(drawColorfulText, 1000);

</script>

이 예제는 1초마다 텍스트 색상이 변하는 애니메이션 효과를 만든다.

Canvas의 텍스트 색상 기능을 활용하면 시각적으로 매력적이고 다양한 텍스트 효과를 만들 수 있다. 단순한 단색부터 복잡한 그라데이션까지 다양한 색상 표현이 가능하다.