diff options
Diffstat (limited to 'files/ru/web/api/canvas_api/tutorial/basic_usage')
| -rw-r--r-- | files/ru/web/api/canvas_api/tutorial/basic_usage/index.html | 150 |
1 files changed, 150 insertions, 0 deletions
diff --git a/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html b/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html new file mode 100644 index 0000000000..3c32d75985 --- /dev/null +++ b/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html @@ -0,0 +1,150 @@ +--- +title: Базовое использование Canvas +slug: Web/API/Canvas_API/Tutorial/Basic_usage +tags: + - Canvas +translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div> + +<p class="summary">Давайте начнем этот урок с изучения элемента {{HTMLElement("canvas")}} как такового. В конце этой страницы Вы узнаете как устанавливать canvas 2D context и нарисуете первый пример в вашем браузере.</p> + +<h2 id="Элемент_<canvas>">Элемент <code><canvas></code></h2> + +<pre class="brush: html notranslate"><canvas id="tutorial" width="150" height="150"></canvas> +</pre> + +<p>Он выглядит как элемент <code><img></code>, но его отличие в том, что он не имеет атрибутов <code>src</code> и <code>alt</code>. Элемент <code><canvas></code> имеет только два атрибута - <strong>ширину</strong> и <strong>высоту</strong>. Оба они не обязательны и могут быть выставлены с использованием свойств <a href="/en-US/docs/DOM" rel="internal" title="en/DOM">DOM</a>. Если атрибуты высоты и ширины не установлены, canvas будет по умолчанию шириной <strong>300 пикселей</strong> и в высоту <strong>150 пикселей</strong>. Вы так же можете выставить размеры произвольно в <a href="/en-US/docs/Web/CSS" rel="internal" title="en/CSS">CSS</a>, но во время рендеринга изображение будет масштабироваться в соответствии с его размером и ориентацией.</p> + +<div class="note"> +<p><strong>Примечание:</strong> Если вид вашего изображения кажется вам искаженным, попробуйте указать атрибуты ширины и высоты в явном виде в атрибутах <canvas> , а не с помощью CSS.</p> +</div> + +<p>Атрибут id не специфичен для элемента <code><canvas>,</code> но он может быть применен по умолчанию в атрибутах HTML, так как он может быть использован (почти) для любого элемента HTML (так же как класс). Это всегда отличная идея использовать <code>id</code>, так как это позволяет намного проще идентифицировать наш элемент в сценарии.</p> + +<p>Элемент <code><canvas></code> может быть стилизован также, как любое изображение (margin, border, background, и т. д.). Эти правила, как бы то ни было, фактически не влияют на отрисовку в canvas. Мы увидим как это сделано позже в этом руководстве. Когда стили не указаны, canvas будет по умолчанию абсолютно прозрачным.</p> + +<div id="section_2"> +<h3 id="Запасное_содержимое">Запасное содержимое</h3> + +<p>Из-за того, что старые браузеры (в особенности, версии Internet Explorer раннее чем 9) не поддерживают элемент {{HTMLElement("canvas")}}, Вам следует предоставить запасное содержимое для отображения этими браузерами.</p> + +<p>Это очень просто: мы всего лишь предоставляем альтернативное содержимое внутри элемента <code><canvas></code>. Браузеры, которые не поддерживают <code><canvas></code> проигнорируют container и отобразят запасное содержимое этого тега. Браузеры, которые поддерживают <code><canvas></code> проигнорируют запасное содержимое, и просто нормально отобразят canvas.</p> + +<p>Например, мы можем предоставить текстовое описание содержимого canvas или предоставить статичное изображение динамически отображаемого содержимого. Это может выглядеть как-то так:</p> + +<pre class="brush: html notranslate"><canvas id="stockGraph" width="150" height="150"> + current stock price: $3.15 +0.15 +</canvas> + +<canvas id="clock" width="150" height="150"> + <img src="images/clock.png" width="150" height="150" alt=""/> +</canvas> +</pre> + +<p>Сообщать пользователю о том, что его браузер не поддерживает canvas не поможет тем, кто не может прочесть содержимое тега canvas, к примеру. Предоставление полезной информации в дополнительном canvas <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">делает этот тег более доступным для широкого использования.</a></p> + +<h3 id="Требуется_тег_<canvas>"><span class="short_text" id="result_box" lang="ru"><span class="hps">Требуется</span> <span class="hps">тег </span></span><code></canvas></code></h3> + +<p>В отличии от элемента {{HTMLElement("img")}}, элемент {{HTMLElement("canvas")}} <strong>требует</strong> закрывающийся тег (<code></canvas></code>). Если этот тег не предоставлен, остаток документа будет считаться запасным контентом и не будет отображен.</p> + +<p>Если запасной контент не нужен, простой <code><canvas id="foo" ...></canvas></code> полностью совместим со всеми браузерами, что поддерживают canvas.</p> + +<h2 id="Рендеринг_содержимого_контекста">Рендеринг содержимого (контекста)</h2> + +<p>Элемент {{HTMLElement("canvas")}} в документе создается с фиксированным размером элемента для рисования, который может иметь один или несколько контекстов для рендеринга, создавая и манипулируя содержимым для показа. В данном руководстве мы сфокусируемся на 2D рендеринге. Другие контексты могут предоставлять разные типы рендеринга, к примеру WebGl использует 3D контекст основанный на <a href="http://www.khronos.org/opengles/">OpenGL ES</a>.</p> + +<p>Холст изначально пустой и прозрачный. Первым делом скрипт получает доступ к контексту и отрисовывает его. Элемент {{HTMLElement("canvas")}} имеет <a href="/en-US/docs/Web/API/HTMLCanvasElement#Method">метод</a> <code>getContext()</code>, используется для получения контекста визуализации и ее функции рисования. <code>getContext()</code> принимает один параметр, тип контекста. Для 2D графики, которая охвачена этим руководством будем использвать метку "2d".</p> + +<pre class="brush: js notranslate">var canvas = document.getElementById('tutorial'); +var ctx = canvas.getContext('2d'); +</pre> + +<p>В первой строке скрипта мы получаем узел нашего холста {{HTMLElement("canvas")}}, далее с помощью {{domxref("document.getContext()")}} метода мы присваиваем ему контекст. Имея узел элемента , вы всегда можете получить для рисования контекст при помощи метода <code>getContext()</code>.</p> + +<div id="section_5"> +<h2 id="Проверка_поддержки">Проверка поддержки</h2> + +<p>Ранее уже упоминалось, что в браузерах, которые не поддерживают {{HTMLElement("canvas")}} отображается запасное содержимое. Но помимо этого, определить, поддерживает ли браузер <code>canvas</code>, можно прямо из кода, проверив наличие метода <code>getContext()</code>. Код с запасным содержимым, который мы приводили Выше, становится следующим:</p> + +<pre class="brush: js notranslate">var canvas = document.getElementById('tutorial'); + +if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + // drawing code here +} else { + // canvas-unsupported code here +} +</pre> +</div> +</div> + +<h2 id="Скелет_шаблона">Скелет шаблона</h2> + +<p>Здесь минимальный шаблон, который мы будем использовать как начальную точку для дальнейших примеров.</p> + +<div class="blockIndicator note"> +<p><strong>Примечание:</strong> вставка скрипта внутрь HTML не является хорошей практикой. Мы делаем это здесь, чтобы сделать пример короче.</p> +</div> + +<pre class="notranslate"><code><!DOCTYPE html></code> +<html> + <head> + <title>Canvas tutorial</title> + <script type="text/javascript"> + function draw(){ + var canvas = document.getElementById('tutorial'); + if (canvas.getContext){ + var ctx = canvas.getContext('2d'); + } + } + </script> + <style type="text/css"> + canvas { border: 1px solid black; } + </style> + </head> + <body onload="draw();"> + <canvas id="tutorial" width="150" height="150"></canvas> + </body> +</html> +</pre> + +<p>Скрипт вызывает функцию draw(), которая выполнится, когда страница закончит загрузку. Это делается путем события {{event("load")}} в документе. Эта функция может быть вызвана как единожды, так и с помощью данных методов {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, или любым другим обработчиком события, когда страница будет загружена.</p> + +<p>Вот как шаблон будет выглядеть в действии.</p> + +<p>{{EmbedLiveSample("Скелет_шаблона", 160, 160)}}</p> + +<h2 id="Простой_пример">Простой пример</h2> + +<p>Для начала, давайте посмотрим на простой пример, который рисует два пересекающихся прямоугольника, один из которых имеет прозрачность alpha. Мы изучим, как это работает более детально в последующих примерах.</p> + +<pre class="notranslate"><code><!DOCTYPE html></code> +<html> + <head> + <script type="application/javascript"> + function draw() { + var canvas = document.getElementById("canvas"); + if (canvas.getContext) { + var ctx = canvas.getContext("2d"); + + ctx.fillStyle = "rgb(200,0,0)"; + ctx.fillRect (10, 10, 55, 50); + + ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; + ctx.fillRect (30, 30, 55, 50); + } + } + </script> + </head> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> + +<p>Этот пример выглядит так:</p> + +<p>{{EmbedLiveSample("Простой_пример", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</p> |