반응형
캔버스에 텍스트를 추가
캔버스에 텍스트를 추가하는 것은 fillText() 또는 strokeText() 메서드를 사용하여 수행할 수 있습니다. 이 메서드들은 캔버스의 2D 컨텍스트에 속해 있으며, 텍스트 문자열과 텍스트를 시작할 x 및 y 좌표를 인자로 받습니다.
다음은 캔버스에 "길이 글인가?" 텍스트를 추가하는 예시 코드입니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Canvas Text Example</title>
<style>
canvas {
border: 5px solid #000000;
background-color: aqua;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="700" height="1000"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// Set the font style for the text
ctx.font = "70px Arial";
// Create the text fill
ctx.fillText("길이 글인가?", 100, 150);
// Optionally, you could outline the text
// ctx.strokeText("Hello, World!", 10, 50);
</script>
</body>
</html>
여기서 ctx.font을 사용하여 텍스트의 크기와 폰트를 설정할 수 있습니다. fillText() 메서드는 지정된 위치에 실제 텍스트를 채워넣고, strokeText() 메서드는 텍스트의 윤곽선만 그립니다.
이 코드는 캔버스의 (100, 150) 위치에 "길이 글인가?" 텍스트를 70픽셀 크기의 Arial 폰트로 그리는 작업을 수행합니다.
반응형
'컴퓨터 활용 > 노년에 즐기는 코딩' 카테고리의 다른 글
| [Sigil] 전자책 표지에 대하여 (47) | 2024.03.12 |
|---|---|
| [FastAPI] FastAPI 설치하고 서버 실행하고 API 엔드포인트 만들기 (61) | 2024.03.11 |
| [HTML] 인라인 요소를 위한 컨테이너, span 태그 (99) | 2024.03.09 |
| [HTML] 세련된 웹 페이지를 돕는 태그, div (114) | 2024.03.08 |
| [HTML] VSCode에서 코드 정리하기 (138) | 2024.03.07 |
댓글