티스토리 뷰

[개발]프로그래밍/html5

[html5] strokeText,fillText - canvas에 텍스트 그리기

좋은 블로그 2021. 3. 3. 10:27
1. 개념
strokeText,fillText - canvas에서 텍스트 그리기
strokeText : 텍스트의 내부를 채우는 것 없이 텍스트의 외각선을 그리는 메소드
fillText : 외각선이 없이 텍스트의 내부를 채워서 그리는 메소드
2. 태그
strokeText,fillText
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
</head>
<body>
<canvas id = "tcanvas" width = "300" height = "200" style =' border : 1px solid #000 '; > </canvas>
<script>
var canvas = document. getElementById ( "tcanvas" );
var context = canvas. getContext ( "2d" );
1
context. strokeStyle = "blue" ; //텍스트 외곽선을 blue로 지정
context. lineWidth =1; //텍스트 외각선의 굵기를 1픽셀로 설정
context. font = "20px arial" ; //20픽셀로 arial 글씨체를 적용
//(20,40) 중심에 "키보드와 하루" 라는 텍스트 외각선을 그림
context. strokeText ( "키보드와 하루" ,20,40);
2
context. fillStyle = "red" ; //텍스트 내부에 칠할 색을 red로 지정
//(20,80) 중심에 "키보드와 하루" 라는 텍스트 내부에 칠하여 그림
context. fillText ( "키보드와 하루" ,20,40);
3
context. fillStyle = "green" ; //텍스트 내부에 칠할 색을 red로 지정
context. textAlign = "right" ; //텍스트 정렬을 중점 기준으로 오른쪽 정렬
//(150,120) 중심에 "키보드와 하루" 라는 텍스트 내부에 칠하여 그림
context. fillText ( "키보드와 하루" ,150,120);
</script>
</body>
</html>
결과 화면
코드 설명
1
context. strokeText ( "키보드와 하루" ,20,40);
strokeText는 내부에 칠하는 색깔이 없이 외곽선만을 그려서 텍스트를 표시해 줍니다.
strokeStyle을 통해서 외곽선 색깔은 blue로 설정하고 lineWidth를 통해서 1픽셀의 굵기로 외각선을 잡아줬습니다
그리고 strokeText를 통해서 키보드와 하루라는 텍스트를 외각선으로 글렸습니다.
2
context. fillText ( "키보드와 하루" ,20,80);
fillText는 외각선 없이 내부에 지정한 색으로 칠해서 텍스트를 그려줍니다.
여기서는 fillStyle를 통해서 red라는 색을 지정해 주었고 그 색으로 내부를 칠해서 텍스트를 그려주었음을 알수 있습니다.
3
context. textAlign = "right" ;
텍스트를 그릴 때 textAlign를 설정하여 "left","center","right"로 정렬을 할 수가 있습니다.
위에서와 같이 right로 지정을 하게 되면 150,120을 중심으로 텍스트 오른쪽 끝을 맞춰서 텍스트를 그려주게 됩니다.
기본 값은 left인데 이런식으로 정렬를 지정해 줄 수도 있습니다.
저작자표시

'[개발]프로그래밍 > html5' 카테고리의 다른 글

[html5] mouseEvent - canvas에서 자유롭게 선 그리기  (0) 2021.03.05
[html5] drawImage - canvas에 이미지 그리기  (0) 2021.03.04
[html5] rect,strokeRect - canvas에 사각형 그리기  (0) 2021.03.02
[html5] arc - canvas에서 원 그리기  (0) 2021.02.26
[html5] canvas - 선 ,도형 그리기 및 채우기  (0) 2021.02.25
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday