HTML5 캔버스에 도(°) 기호 표시하기
HTML5 캔버스(Canvas)에 온도를 나타내는 도(°) 기호를 함께 출력하려면 fillText() 메서드와 HTML 엔티티인 °를 활용하면 됩니다. 아래 예제 코드를 실행하면 캔버스 위에 '212° Fahrenheit'라는 텍스트가 그려집니다.
코드가 정상적으로 동작하려면 문서의 문자 인코딩을 UTF-8로 지정해야 합니다. 이는 <meta charset="utf-8"> 태그로 설정할 수 있으며, 특수문자가 깨지지 않고 올바르게 렌더링되도록 보장합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style media="screen">
body {
margin:5em;
background:#eee;
text-align:center
}
canvas {
background:#fff;
border:2px solid #ccc;
display:block;
margin:3em auto
}
</style>
</head>
<body>
<script charset="utf-8">
var c = document.getElementsByTagName('canvas')[0];
c.width = c.height = 300;
var context = c.getContext('2d');
context.font = "20px sans-serif";
context.fillText("212° Fahrenheit", 100, 100);
</script>
</body>
</html>코드 설명
1. 캔버스 요소 가져오기: document.getElementsByTagName('canvas')[0]를 통해 문서에서 첫 번째 캔버스 요소를 선택하고, 크기를 300×300 픽셀로 설정합니다.
2. 2D 컨텍스트 생성: c.getContext('2d')로 캔버스의 2D 드로잉 컨텍스트를 얻어옵니다. 모든 그리기 작업은 이 컨텍스트를 통해 수행됩니다.
3. 폰트 설정: context.font = "20px sans-serif"로 텍스트의 글꼴과 크기를 지정합니다.
4. 텍스트 출력: context.fillText() 메서드 안에 ° 엔티티를 포함한 문자열을 전달하면, 캔버스 좌표 (100, 100) 위치에 도 기호가 포함된 텍스트가 렌더링됩니다.
이 방법을 응용하면 섭씨·화씨 온도 표시, 각도 표기 등 다양한 상황에서 캔버스 내에 도(°) 기호를 손쉽게 활용할 수 있습니다.