diff options
Diffstat (limited to 'files/ko/drawing_text_using_a_canvas/index.html')
| -rw-r--r-- | files/ko/drawing_text_using_a_canvas/index.html | 164 |
1 files changed, 164 insertions, 0 deletions
diff --git a/files/ko/drawing_text_using_a_canvas/index.html b/files/ko/drawing_text_using_a_canvas/index.html new file mode 100644 index 0000000000..2c789e85a4 --- /dev/null +++ b/files/ko/drawing_text_using_a_canvas/index.html @@ -0,0 +1,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> |