diff options
Diffstat (limited to 'files/ru/web/api/canvas_api/tutorial/drawing_text')
| -rw-r--r-- | files/ru/web/api/canvas_api/tutorial/drawing_text/index.html | 166 |
1 files changed, 166 insertions, 0 deletions
diff --git a/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html b/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html new file mode 100644 index 0000000000..90915c5e09 --- /dev/null +++ b/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html @@ -0,0 +1,166 @@ +--- +title: Рисование текста +slug: Web/API/Canvas_API/Tutorial/Рисование_текста +tags: + - Canvas + - Графика + - Примеры + - Рукводовство + - мануал +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="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">применять стили и цвета</a>, взглянем на написание текста в canvas.</p> +</div> + +<h2 id="Рисование_текста">Рисование текста</h2> + +<p>Контекст рендеринга canvas предоставляет два метода для рисования текста:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}</dt> + <dd>Вставляет заданный текст в положении (x,y). Опционально может быть указана максимальная ширина.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}</dt> + <dd>Вставляет контур заданного текста в положении (x,y). Опционально может быть указана максимальная ширина.</dd> +</dl> + +<h3 id="Пример_fillText">Пример <code>fillText</code></h3> + +<p>Текст вставлен с использованием текущего <code>fillStyle</code>.</p> + +<pre class="brush: js;highlight[4] notranslate">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 notranslate"><canvas id="canvas" width="300" height="100"></canvas></pre> + +<pre class="brush: js notranslate">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] notranslate">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 notranslate"><canvas id="canvas" width="300" height="100"></canvas></pre> + +<pre class="brush: js notranslate">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_strokeText_example", 310, 110)}}</p> + +<h2 id="Стилизация_текста">Стилизация текста</h2> + +<p>В примерах выше мы уже использовали свойство font для изменения размера текста. Кроме него существуют еще несколько свойств, позволяющие настроить вывод текста на canvas:</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>Редактируя код ниже, вы можете видеть, как меняется отображение текста на canvas в реальном времени:</p> + +<pre class="brush: js;highlight[2] notranslate">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 notranslate"><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 notranslate">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>Для измерения ширины текста (без рисования его на canvas) можно воспользоваться следующим методом:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}</dt> + <dd>Возвращает объект {{domxref("TextMetrics")}}, содержащий ширину текста в пикселах, до отрисовки на canvas.</dd> +</dl> + +<p>Пример ниже показывает, как можно измерить ширину текста.</p> + +<pre class="brush: js;highlight[3] notranslate">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var text = ctx.measureText("foo"); // TextMetrics object + text.width; // 16; +} +</pre> + +<h2 id="Примечания">Примечания</h2> + +<p>В ранних версиях Gecko (движок рендеринга в Firefox, Firefox OS и других приложениях Mozilla) были реализованы <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Prefixed_APIs">методы API с префиксами</a> для рисования текста на canvas. На данный момент они устарели и уже, возможно, удалены, поэтому их правильная работа не гарантируется.</p> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</p> |