# canvas에 텍스트(글자) 쓰기
1. 글자 색 설정
ctx.fillStyle = "색상";
2. 폰트 설정
ctx.font = "스타일 굵기 크기 서체"
1) 스타일: normal(디폴트)|italic|oblique
2) 굵기: normal(디폴트)|bold|bolder|lighter
3) 크기: 숫자px(디폴트 10px)
4) 서체: sans-serif(디폴트)|Arial ...
* 미지정시 ctx.font = "10px sans-serif" 디폴트 적용됨
3. 텍스트 정렬
1) 좌우정렬: ctx.textAlign = "start(디폴트)|end|center|left|right";
2) 상하정렬: ctx.textBaseline= "alphabetic(디폴트)|top|hanging|middle|ideographic|bottom";
4. 텍스트 그리기
ctx.fillText("텍스트", x좌표, y좌표, 최대 너비)
* 최대 너비만큼 텍스트 너비가 줄어든다.(생략시, 텍스트 길이만큼 표시)
5. 텍스트 외곽선 그리기
ctx.stokeText("텍스트", x좌표, y좌표, 최대 너비)
* 외곽선의 색은 ctx.strokeStyle = "색상"; 으로 지정
# 샘플 예제 코드
캔버스에 다양한 스타일의 테스트를 그려보는 예제
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- HTML -->
<!-- 1. canvas 엘리먼트를 선언한다: id, widht, height를 태그 내에서 지정해준다. -->
<canvas id="myCanvas" width="400" height="300"></canvas>
<!-- Javascript -->
<script>
// 1. canvas 엘리먼트를 취득한다.
const canvas = document.getElementById('myCanvas');
// 2. 2d모드의 그리기 객체를 취득한다. => 이 객체를 통해 canvas에 그림을 그릴 수 있다.
const ctx = canvas.getContext("2d");
// 3-1. 텍스트 그리기(기본)
ctx.fillText("1. 캔버스에 텍스트를 씁니다.", 10, 10);
// 3-2. 텍스트 그리기(최대 너비 지정)
ctx.fillText("2. 캔버스에 텍스트를 씁니다.", 10, 30, 50);
// 3-3. 텍스트 폰트 설정
ctx.font = "italic bold 20px Arial, sans-serif"; //Arial서체 없을 경우, sans-serif 적용
ctx.fillText("3. 캔버스에 텍스트를 씁니다.", 10, 60);
// 3-4. 텍스트 색상 설정
ctx.fillStyle = 'blue';
ctx.fillText("4. 캔버스에 텍스트를 씁니다.", 10, 90);
// 3-5. 텍스트 외곽선 그리기
ctx.strokeStyle = 'red';
ctx.strokeText("5. 캔버스에 텍스트를 씁니다.", 10, 120);
// 3-6. 텍스트+외곽선 그리기
ctx.fillText("6. 캔버스에 텍스트를 씁니다.", 10, 150);
ctx.strokeText("6. 캔버스에 텍스트를 씁니다.", 10, 150);
// 3.7. 가운데 정렬 텍스트
ctx.textAlign = "center";
ctx.fillText("7. 캔버스에 텍스트를 씁니다.", 200, 180);
</script>
</body>
</html><결과물>
캔버스 기초는 아래글 참고
'개발(Development) > HTML Canvas(캔버스)' 카테고리의 다른 글
| HTML Canvas(캔버스) 마우스 이동/클릭 좌표 추적 확인 방법 (0) | 2021.06.06 |
|---|---|
| HTML Canvas(캔버스) 애니메이션 구현 방법 기초 (0) | 2021.06.04 |
| HTML Canvas(캔버스) 패턴 이미지 채우기 적용 방법: createPattern (0) | 2021.06.04 |
| HTML Canvas(캔버스): 이미지 그리기 방법 drawImage (0) | 2021.06.04 |
| HTML Canvas(캔버스): 그라데이션 gradient 색 설정 방법 (0) | 2021.06.03 |
댓글