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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
|
---
title: 텍스트 그리기
slug: Drawing_text_using_a_canvas
tags:
- HTML
- 'HTML:Canvas'
- NeedsContent
translation_of: Web/API/Canvas_API/Tutorial/Drawing_text
---
<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</div>
<div class="summary">
<p>이전 챕터에서 <a href="/ko/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">스타일과 컬러를 적용하는 방법</a>에 대해서 보았고 이번에는 캔버스에 텍스트를 그리는 방법에 대해서 볼 예정입니다.</p>
</div>
<h2 id="텍스트_그리기">텍스트 그리기</h2>
<p>캔버스 렌더링 컨텍스트(canvas rendering context)는 텍스트를 렌더링하는 두 가지 방법을 제공합니다.</p>
<dl>
<dt>{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}</dt>
<dd>주어진 (x, y) 위치에 주어진 텍스트를 채웁니다. 최대 폭(width)은 옵션 값 입니다.</dd>
<dt>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}</dt>
<dd>주어진 (x, y) 위치에 주어진 텍스트를 칠(stroke)합니다. 최대 폭(width)은 옵션 값 입니다.</dd>
</dl>
<h3 id="fillText_예제"><code>fillText</code> 예제</h3>
<p>텍스트는 현재의 <code>fillStyle</code>을 사용하여 채워집니다.</p>
<pre class="brush: js;highlight[4]">function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = '48px serif';
ctx.fillText('Hello world', 10, 50);
}</pre>
<div class="hidden">
<pre class="brush: html"><canvas id="canvas" width="300" height="100"></canvas></pre>
<pre class="brush: js">draw();</pre>
</div>
<p>{{EmbedLiveSample("A_fillText_example", 310, 110)}}</p>
<h3 id="strokeText_예제"><code>strokeText</code> 예제</h3>
<p>텍스트는 현재의 <code>strokeStyle</code>을 이용하여 채워집니다.</p>
<pre class="brush: js;highlight[4]">function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = '48px serif';
ctx.strokeText('Hello world', 10, 50);
}</pre>
<div class="hidden">
<pre class="brush: html"><canvas id="canvas" width="300" height="100"></canvas></pre>
<pre class="brush: js">draw();</pre>
</div>
<p>{{EmbedLiveSample("A_strokeText_example", 310, 110)}}</p>
<h2 id="텍스트_스타일_적용하기">텍스트 스타일 적용하기</h2>
<p> 위의 예제에서 우리는 이미 텍스트를 기본 사이즈를 키우기 위하여 <code>font</code> 프로퍼티를 사용하였습니다. 그리고 캔버스에 표시되는 텍스트를 조정할 수 있는 속성이 더 있습니다. </p>
<dl>
<dt>{{domxref("CanvasRenderingContext2D.font", "font = value")}}</dt>
<dd>텍스트를 그릴 때 사용되는 현재 텍스트 스타일. 이 문자열은 <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("font")}} 프로퍼티와 동일한구문을 사용합니다. 기본값으로 sans-serif의 10px가 설정되어 있습니다.</dd>
<dt>{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}</dt>
<dd>텍스트 정렬 설정. 사용가능한 값: <code>start</code>, <code>end</code>, <code>left</code>, <code>right</code>, <code>center</code>. 기본 값은 <code>start</code> 입니다.</dd>
<dt>{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}</dt>
<dd>베이스라인 정렬 설정. 사용가능한 값: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code>, <code>ideographic</code>, <code>bottom</code>. 기본 값은 <code>alphabetic</code> 입니다</dd>
<dt>{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}</dt>
<dd>글자 방향. 사용가능한 값: <code>ltr</code>, <code>rtl</code>, <code>inherit</code>. 기본 값은 <code>inherit</code> 입니다.</dd>
</dl>
<p>만약 CSS를 다뤄보신적이 있다면 이러한 프로퍼티들은 익숙하실겁니다.</p>
<p>다음에 나오는 <a class="external" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a> 예제 다이어그램은 <code>textBaseline</code>를 이용하여 다양한 베이스라인 설정을 보여줍니다.<img alt="The top of the em square is
roughly at the top of the glyphs in a font, the hanging baseline is
where some glyphs like आ are anchored, the middle is half-way
between the top of the em square and the bottom of the em square,
the alphabetic baseline is where characters like Á, ÿ,
f, and Ω are anchored, the ideographic baseline is
where glyphs like 私 and 達 are anchored, and the bottom
of the em square is roughly at the bottom of the glyphs in a
font. The top and bottom of the bounding box can be far from these
baselines, due to glyphs extending far outside the em square." src="http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png"></p>
<h3 id="textBaseline_예제">textBaseline 예제</h3>
<p>아래의 코드를 수정하여 캔버스에서 어떻게 바뀌는지 실시간으로 확인해 보세요.</p>
<pre class="brush: js;highlight[2]">ctx.font = '48px serif';
ctx.textBaseline = 'hanging';
ctx.strokeText('Hello world', 0, 100);
</pre>
<div class="hidden">
<h6 id="Playable_code" name="Playable_code">Playable code</h6>
<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello world", 0, 100);</textarea>
</pre>
<pre class="brush: js">var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var edit = document.getElementById('edit');
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener('click', function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener('click', function() {
textarea.focus();
})
textarea.addEventListener('input', drawCanvas);
window.addEventListener('load', drawCanvas);
</pre>
</div>
<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
<h2 id="어드밴스드_텍스트_측정">어드밴스드 텍스트 측정</h2>
<p>만약 텍스트에대해 조금 더 디테일한 것들을 얻고 싶다면 다음의 메소드를 이용해보세요.</p>
<dl>
<dt>{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}</dt>
<dd>현재 스타일로 특정 텍스트가 그려질 때의 폭, 픽셀 등을 포함하는 {{domxref("TextMetrics")}} 객체 리턴. </dd>
</dl>
<p>다음의 코드는 어떻게 텍스트를 측정하는 지, 그리고 폭을 구하는 예제입니다.</p>
<pre class="brush: js;highlight[3]">function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var text = ctx.measureText('foo'); // TextMetrics object
text.width; // 16;
}
</pre>
<h2 id="Gecko_사용시_주의점">Gecko 사용시 주의점</h2>
<p>Gecko(Firefox, Firefox OS외 Mozilla 기반의 에플리케이션 렌더링 엔진)에서는 캔버스에 텍스트를 그리기 위한 몇몇의 <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Prefixed_APIs">prefixed APIs</a>가 구현되어 있습니다. 그리고 지금은 사용되지 않아 제거되었거나 작동을 보장하지 않는 것들도 있습니다. </p>
<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</p>
|
