[개발]프로그래밍/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를 통해서 키보드와 하루라는 텍스트를 외각선으로 글렸습니다.
strokeStyle을 통해서 외곽선 색깔은 blue로 설정하고 lineWidth를 통해서 1픽셀의 굵기로 외각선을 잡아줬습니다
그리고 strokeText를 통해서 키보드와 하루라는 텍스트를 외각선으로 글렸습니다.
2
context.
fillText
(
"키보드와 하루"
,20,80);
fillText는 외각선 없이 내부에 지정한 색으로 칠해서 텍스트를 그려줍니다.
여기서는 fillStyle를 통해서 red라는 색을 지정해 주었고 그 색으로 내부를 칠해서 텍스트를 그려주었음을 알수 있습니다.
여기서는 fillStyle를 통해서 red라는 색을 지정해 주었고 그 색으로 내부를 칠해서 텍스트를 그려주었음을 알수 있습니다.
3
context.
textAlign
=
"right"
;
텍스트를 그릴 때 textAlign를 설정하여 "left","center","right"로 정렬을 할 수가 있습니다.
위에서와 같이 right로 지정을 하게 되면 150,120을 중심으로 텍스트 오른쪽 끝을 맞춰서 텍스트를 그려주게 됩니다.
기본 값은 left인데 이런식으로 정렬를 지정해 줄 수도 있습니다.
위에서와 같이 right로 지정을 하게 되면 150,120을 중심으로 텍스트 오른쪽 끝을 맞춰서 텍스트를 그려주게 됩니다.
기본 값은 left인데 이런식으로 정렬를 지정해 줄 수도 있습니다.