diff options
Diffstat (limited to 'files/ru/web/api/canvas_api')
8 files changed, 31 insertions, 31 deletions
diff --git a/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html b/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html index d7afa0bf65..848c527485 100644 --- a/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html +++ b/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html @@ -11,13 +11,13 @@ translation_of: Web/API/Canvas_API/A_basic_ray-caster <p><strong><a href="http://mdn.github.io/canvas-raycaster/">Открыть в новом окне</a></strong></p> -<h2 id="Why.3F" name="Why.3F">Зачем?</h2> +<h2 id="Why.3F">Зачем?</h2> <p>Я попробовал небольшой эксперимент, понимая, к моему восторгу, что стильный элемент <code><canvas></code> о котором я <a href="https://www.whatwg.org/specs/web-apps/current-work/#dynamic">читал</a>, поддерживается не только в Fierfox, но так же поддерживается последней версией Safari.</p> <p>Хорошие <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">обзор</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">руководство</a> по canvas я нашёл в MDN, но никто ещё не писал об анимации, поэтому я решил попробовать базовый порт raycaster, над которым я работал некоторое время назад, и посмотреть, какую производительность мы можем ожидать от управляемого JavaScript-ом пиксельного буфера.</p> -<h2 id="How.3F" name="How.3F">Как?</h2> +<h2 id="How.3F">Как?</h2> <p>Основная идея заключается в использовании {{domxref("window.setInterval","setInterval()")}} с некоторой произвольной задержкой, соответствующей требуемой частоте кадров. После каждого интервала функция обновления будет перерисовывать холст, и отображать текущий вид. Я знаю, что мог бы начать с более простого примера, но я уверен, что руководство canvas <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">доберётся до этого</a>, и я хотел посмотреть, смогу ли я это сделать.</p> @@ -25,13 +25,13 @@ translation_of: Web/API/Canvas_API/A_basic_ray-caster <p>Код, который я получил, - это смесь глав raycaster из старой книги Андре Ламотетрикса о гуру программирования игр (ISBN: 0672305070) и <a class="external" href="http://www.shinelife.co.uk/java-maze/">java raycaster</a>, которую я нашёл в интернете, отфильтровал, переименовал, и внёс все изменения, которые нужно было внести, чтобы все работало хорошо.</p> -<h2 id="Results" name="Results">Результаты</h2> +<h2 id="Results">Результаты</h2> <p>Холст в Safari 2.0.1 выполнен на удивление хорошо. С коэффициентом блочности, увеличенным до отображения кусочка шириной 8 пикселей, я могу запустить окно 320 x 240 при 24 fps на моем Apple mini. Firefox 1.5 Beta 1 ещё быстрее; я могу запускать 320 x 240 при 24 fps с 4 пиксельным кусочком. Не совсем новый член семейства программного обеспечения ID, но довольно приличный, учитывая, что это полностью интерпретируемая среда, и мне не нужно было беспокоиться о выделении памяти или видеорежимах или кодировании внутренних процедур в ассемблере или чем-то ещё. Код получился очень эффективным, он использует поиск по массиву предварительно вычисленных значений, но я не гуру оптимизации, поэтому все, вероятно, можно было бы написать быстрее.</p> <p>Кроме того, он оставляет желать лучшего с точки зрения попыток быть игровым движком—нет текстур стен, нет спрайтов, нет дверей, даже нет телепортов, чтобы добраться до другого уровня. Но я уверен, что все эти вещи могут быть добавлены, через некоторое время. Canvas API поддерживает пиксельное копирование изображений, поэтому текстуры могут быть добавлены. Я оставлю это для другой статьи, возможно, от другого человека. =)</p> -<h2 id="The_RayCaster" name="The_RayCaster">ray-caster</h2> +<h2 id="The_RayCaster">ray-caster</h2> <p>Хорошие люди здесь вручную скопировали мои файлы, чтобы вы могли <a href="https://mdn.github.io/canvas-raycaster/">взглянуть</a>, и для вашего удобства я разместил содержимое отдельных файлов в виде списков кодов (см. ниже).</p> @@ -39,7 +39,7 @@ translation_of: Web/API/Canvas_API/A_basic_ray-caster <p><small><a href="https://github.com/mdn/canvas-raycaster/blob/master/input.js">input.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Level.js">Level.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Player.js">Player.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/index.html">RayCaster.html</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/RayCaster.js">RayCaster.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.css">trace.css</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.js">trace.js</a> </small></p> -<h2 id="See_also" name="See_also">Смотрите также</h2> +<h2 id="See_also">Смотрите также</h2> <ul> <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas руководство</a></li> diff --git a/files/ru/web/api/canvas_api/index.html b/files/ru/web/api/canvas_api/index.html index 8dbb43155b..da3165f93d 100644 --- a/files/ru/web/api/canvas_api/index.html +++ b/files/ru/web/api/canvas_api/index.html @@ -95,7 +95,7 @@ window.addEventListener("load", drawCanvas); <p class="brush: js"><span id="result_box" lang="ru"><span>Интерфейсы, связанные с <code>WebGLRenderingContext</code>, ссылаются на </span></span><a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p> -<h2 class="Documentation" id="Documentation" name="Documentation">Руководства</h2> +<h2 class="Documentation" id="Documentation">Руководства</h2> <dl> <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></dt> @@ -110,7 +110,7 @@ window.addEventListener("load", drawCanvas); <dd>Объединяет {{HTMLElement("video")}} и {{HTMLElement("canvas")}} для манипулирования видео данных в реальном времени.</dd> </dl> -<h2 class="Resources" id="Resources" name="Resources">Ресурсы</h2> +<h2 class="Resources" id="Resources">Ресурсы</h2> <h3 id="Основное">Основное</h3> @@ -119,7 +119,7 @@ window.addEventListener("load", drawCanvas); <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Справочник по Canvas</a></li> </ul> -<h3 class="Libraries" id="Libraries" name="Libraries">Библиотеки</h3> +<h3 class="Libraries" id="Libraries">Библиотеки</h3> <ul> <li><a href="http://fabricjs.com">Fabric.js</a> это canvas библиотека с открытым исходным кодом с возможностями SVG парсинга.</li> @@ -135,7 +135,7 @@ window.addEventListener("load", drawCanvas); <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> создаёт интерактивные 2D Canvas визуализации данных для интернета.</li> </ul> -<h2 id="Specifications" name="Specifications">Спецификации</h2> +<h2 id="Specifications">Спецификации</h2> <table class="standard-table"> <thead> diff --git a/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html index 688e8a5b54..d85af68d7c 100644 --- a/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html +++ b/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html @@ -10,7 +10,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Применение_стилей_и_ <p>В главе о <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Web/Guide/HTML/Canvas_tutorial/Drawing_shapes">рисовании фигур</a>, <span id="result_box" lang="ru"><span>мы использовали</span></span><span lang="ru"><span class="hps"> для линий</span> <span class="hps">и</span><span class="hps"> заполнения</span> <span class="hps">только</span> <span class="hps">стили<span> </span>по умолчанию</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">Здесь</span> <span class="hps">мы будем исследовать</span> <span class="hps">опции </span></span>canvas<span lang="ru">, которые <span class="hps">мы</span> <span class="hps">имеем в нашем</span> <span class="hps">распоряжении, чтобы сделать</span> <span class="hps">наши</span> <span class="hps">рисунки</span> <span class="hps">немного</span> <span class="hps">более привлекательными. </span></span><span id="result_box" lang="ru"><span class="hps">Вы узнаете, как</span> <span class="hps">добавлять различные</span> <span class="hps">цвета,</span> <span class="hps">стили линий</span><span>, градиенты</span><span>, узоры</span> <span class="hps">и тени</span> <span class="hps">вашим рисункам</span><span>.</span></span></p> </div> -<h2 id="Colors" name="Colors">Цвета</h2> +<h2 id="Colors">Цвета</h2> <p><span id="result_box" lang="ru"><span class="hps">До сих пор</span> <span class="hps">мы</span> <span class="hps">видели только</span> <span class="hps">методы</span> <span class="hps">рисования контекста. </span></span><span id="result_box" lang="ru"><span class="hps">Если</span> <span class="hps">мы хотим применить</span> <span class="hps">цвета</span> <span class="hps">к фигуре</span><span>,</span> то <span class="hps">есть два важных</span> <span class="hps">свойства</span>, которые <span class="hps">мы можем</span> <span class="hps">использовать:</span></span> <code>fillStyle</code> и <code>strokeStyle</code>.</p> @@ -90,7 +90,7 @@ ctx.fillStyle = "rgba(255,165,0,1)"; <p>{{EmbedLiveSample("Пример_strokeStyle", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p> -<h2 id="Transparency" name="Transparency">Прозрачность</h2> +<h2 id="Transparency">Прозрачность</h2> <p>В дополнении к рисованию непрозрачных фигур, мы также можем рисовать прозрачные (полупрозрачные) фигуры. Это делается через установку свойства <code>globalAlpha</code> или задачи полупрозрачного цвета фона или контура.</p> @@ -181,7 +181,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <p>{{EmbedLiveSample("Пример_использования_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p> -<h2 id="Line_styles" name="Line_styles">Стили линий</h2> +<h2 id="Line_styles">Стили линий</h2> <p>Есть несколько свойств, которые позволяют нам стилизовать линии.</p> diff --git a/files/ru/web/api/canvas_api/tutorial/basic_animations/index.html b/files/ru/web/api/canvas_api/tutorial/basic_animations/index.html index 0719240b2c..c4de801543 100644 --- a/files/ru/web/api/canvas_api/tutorial/basic_animations/index.html +++ b/files/ru/web/api/canvas_api/tutorial/basic_animations/index.html @@ -19,7 +19,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Основы_анимации <p>Вероятно, самым большим ограничением является то, что когда фигура нарисована, её уже нельзя двигать. Чтобы изобразить движение нам нужно перерисовать фигуру и всё, что было нарисовано до неё. Перерисовка сложных кадров занимает много времени, и производительность сильно зависит от скорости компьютера, на котором она выполняется.</p> -<h2 id="Basic_animation_steps" name="Basic_animation_steps">Основные шаги анимации</h2> +<h2 id="Basic_animation_steps">Основные шаги анимации</h2> <p>Ниже перечислены необходимые шаги для того, чтобы нарисовать кадр:</p> @@ -34,7 +34,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Основы_анимации Если вы сохраняли состояние, восстановите его, прежде чем отрисовывать новый кадр.</li> </ol> -<h2 id="Controlling_an_animation" name="Controlling_an_animation">Управление анимацией</h2> +<h2 id="Controlling_an_animation">Управление анимацией</h2> <p>Фигуры отрисовываются на canvas либо напрямую — при помощи методов canvas, либо с помощью сторонних функций. В нормальной ситуации результат станет виден на canvas после окончания выполнения скрипта. К примеру, цикл for использовать для анимации нельзя. </p> @@ -297,7 +297,7 @@ function draw() { <p>{{EmbedLiveSample("Зацикленная_панорама", "830", "230")}}</p> -<h2 id="Other_examples" name="Other_examples">Другие примеры</h2> +<h2 id="Other_examples">Другие примеры</h2> <dl> <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster" title="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster">A basic ray-caster</a></dt> diff --git a/files/ru/web/api/canvas_api/tutorial/compositing/index.html b/files/ru/web/api/canvas_api/tutorial/compositing/index.html index 4e4df0bef6..43661fc700 100644 --- a/files/ru/web/api/canvas_api/tutorial/compositing/index.html +++ b/files/ru/web/api/canvas_api/tutorial/compositing/index.html @@ -12,7 +12,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Композиции <p>Во всех наших <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations">предыдущих примерах</a>, фигуры всегда были нарисованы одна поверх другой. Это более чем достаточно для большинства ситуаций, но это ограничивает порядок, в котором построены композиционные формы. Однако, мы можем изменить это поведение, установив свойство <code>globalCompositeOperation</code>. Кроме того, свойства <code>clip</code> позволяет скрыть нежелательные части формы.</p> </div> -<h2 id="globalCompositeOperation" name="globalCompositeOperation"><code>globalCompositeOperation</code></h2> +<h2 id="globalCompositeOperation"><code>globalCompositeOperation</code></h2> <p>Мы можем не только рисовать новые фигуры за существующие формы, но мы также можем использовать его, чтобы замаскировать определённые участки, очистить разделы от холста (не ограничивается прямоугольниками, как{{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} method does) и другое.</p> @@ -25,7 +25,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Композиции <p>{{EmbedLiveSample("Compositing_example", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}</p> -<h2 id="Clipping_paths" name="Clipping_paths">Обрезка контуров</h2> +<h2 id="Clipping_paths">Обрезка контуров</h2> <p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/209/Canvas_clipping_path.png" style="float: right;">Отсечённый контур похож на обычную форму холста, но он действует как маска, чтобы скрыть нежелательные части фигур. Это визуализируется на изображении справа. Форма красной звезды - наша отправочная дорожка. Все, что выходит за пределы этого пути, не будет нарисовано на холсте.</p> @@ -42,7 +42,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Композиции <p>По умолчанию элемент {{HTMLElement("canvas")}} использует отсечённый контур, который в точности совпадает по размеру с размером самого холста. Это означает, что никакого отсечения попросту не произойдёт.</p> -<h3 id="A_clip_example" name="A_clip_example">Пример обрезки</h3> +<h3 id="A_clip_example">Пример обрезки</h3> <p>В этом примере мы будем использовать круговую обрезку контура, чтобы ограничить рисование набора случайных звёзд определённой областью.</p> 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 index 0464d884bf..58707876c9 100644 --- a/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html +++ b/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html @@ -101,7 +101,7 @@ ctx.strokeText("Hello world!", 0, 100); </pre> <div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h6 id="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"> diff --git a/files/ru/web/api/canvas_api/tutorial/index.html b/files/ru/web/api/canvas_api/tutorial/index.html index cd0e99eb32..5d35071256 100644 --- a/files/ru/web/api/canvas_api/tutorial/index.html +++ b/files/ru/web/api/canvas_api/tutorial/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/Canvas_API/Tutorial <p><code>Впервые <canvas></code> использовался компанией Apple для создания <a href="https://ru.wikipedia.org/wiki/Dashboard">Mac OS X Dashboard</a>, а затем был реализован в Web-браузерах. На сегодняшний день все основные браузеры поддерживают работу с <canvas>. Тег <code><canvas></code> часть спецификации <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> также известной как HTML5.</p> -<h2 id="Before_you_start" name="Before_you_start">Прежде чем начать</h2> +<h2 id="Before_you_start">Прежде чем начать</h2> <p>Работа с элементом <strong><code><canvas></code></strong> довольно проста, но потребует от вас базовых знаний <a href="ru/docs/HTML" title="HTML">HTML</a> и <a href="JavaScript" title="JavaScript">JavaScript</a>. Следует предупредить о том, что элемент <code><<strong>canvas></strong></code> не работает в некоторых старых браузерах, но поддерживается большинством современных браузеров. Стандартный размер <strong><code><canvas></code></strong> 300px × 150px (ширина × высота), однако эти размеры могут быть изменены при помощи HTML-атрибутов <code>height</code> и <code>width</code>. Для рисования графики <strong><code><canvas></code></strong> мы будем использовать <code>javascript context object</code>, который создаёт графику динамически.</p> -<h2 id="In_this_tutorial" name="In_this_tutorial">В этом руководстве</h2> +<h2 id="In_this_tutorial">В этом руководстве</h2> <ul> <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">Базовое использование</a></li> @@ -33,7 +33,7 @@ translation_of: Web/API/Canvas_API/Tutorial <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">Оптимизация canvas</a></li> </ul> -<h2 id="See_also" name="See_also">Смотрите Также</h2> +<h2 id="See_also">Смотрите Также</h2> <ul> <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li> diff --git a/files/ru/web/api/canvas_api/tutorial/transformations/index.html b/files/ru/web/api/canvas_api/tutorial/transformations/index.html index 9fbcbf30e7..5a557d2aed 100644 --- a/files/ru/web/api/canvas_api/tutorial/transformations/index.html +++ b/files/ru/web/api/canvas_api/tutorial/transformations/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <div class="summary"><span class="notranslate">Ранее в этом уроке мы узнали о</span> <span class="notranslate" style="background-color: #e6ecf9;"> <a href="https://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=ru&ie=UTF8&prev=_t&rurl=translate.google.com&sl=en&sp=nmt4&tl=ru&u=https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes&usg=ALkJrhiuWce927wE2920fN95Jlcrf1HyUg">сетке холста</a></span> <span class="notranslate">и <strong>координатном пространстве</strong> .</span> <span class="notranslate"> До сих пор мы использовали только сетку по умолчанию и изменили размер всего холста для наших нужд.</span> При преобразованиях существуют более мощные способы изменения исходных координат в различные положение, поворот сетки и даже масштабирование.</div> -<h2 id="Saving_and_restoring_state" name="Saving_and_restoring_state"><span class="notranslate" style="background-color: #e6ecf9;">Сохранение и восстановление состояния</span></h2> +<h2 id="Saving_and_restoring_state"><span class="notranslate" style="background-color: #e6ecf9;">Сохранение и восстановление состояния</span></h2> <p><span class="notranslate">Прежде чем перейти к методам преобразования, давайте рассмотрим два других метода, которые необходимы, когда вы начинаете создавать все более сложные рисунки.</span></p> @@ -28,7 +28,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <p>Вы можете вызывать метод <code>save()</code> столько раз, сколько захотите. В то же время, при вызове метода <code>restore()</code> последнее сохранённое состояние будет считано из стека, и все сохранённые настройки будут восстановлены.</p> -<h3 id="A_save_and_restore_canvas_state_example" name="A_save_and_restore_canvas_state_example">Пример <font face="consolas, Liberation Mono, courier, monospace">сохранения и восстановления</font> состояния холста</h3> +<h3 id="A_save_and_restore_canvas_state_example">Пример <font face="consolas, Liberation Mono, courier, monospace">сохранения и восстановления</font> состояния холста</h3> <p>Здесь показано, как функционирует сохранение в стек состояния отрисовки на примере последовательной отрисовки набора прямоугольников.</p> @@ -67,7 +67,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <p>{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}</p> -<h2 id="Translating" name="Translating">Трансляция (смещение)</h2> +<h2 id="Translating">Трансляция (смещение)</h2> <p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/234/Canvas_grid_translate.png" style="float: right;">Первый метод для трансформирования холста <code>translate()</code>. Он используется для перемещения холста в любую точку нашей сетки.</p> @@ -78,7 +78,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <p>Неплохая идея - сохранять <code>canvas state</code> перед использованием любых трансформаций. Обычно удобнее использовать метод <code>restore</code>, чем выполнять обратные преобразования, чтобы вернуться к начальному состоянию. <span class="tlid-translation translation" lang="ru"><span title="">Кроме того, если вы выполняете преобразования внутри цикла не используя </span></span><code>save</code><span class="tlid-translation translation" lang="ru"><span title=""> и </span></span><code>restore</code><span class="tlid-translation translation" lang="ru"><span title="">, вы рискуете потерять часть рисунка, потому что он был нарисован за пределами края холста.</span></span></p> -<h3 id="A_translate_example" name="A_translate_example">Пример использования <code>translate</code></h3> +<h3 id="A_translate_example">Пример использования <code>translate</code></h3> <p><span class="tlid-translation translation" lang="ru"><span title="">Этот пример демонстрирует некоторые преимущества</span></span> при использовании смещения холста. Без использования метода <code>translate()</code> все прямоугольники будут отрисованы в одинаковой позиции (0,0). Метод <code>translate()</code> даёт возможность размещения прямоугольника в любой позиции без изменения параметров функции <code>fillRect()</code>. Это может дать некоторое упрощение для понимания и использования.</p> @@ -106,7 +106,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <p>{{EmbedLiveSample("A_translate_example", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}</p> -<h2 id="Rotating" name="Rotating">Поворот</h2> +<h2 id="Rotating">Поворот</h2> <p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;">Второй метод трансформации <code>rotate()</code>. Он используется для поворота нашего холста.</p> @@ -117,7 +117,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <p>Центр поворота - всегда начало координат. Для изменения координат центра мы должны сместить холст, используя метод <code>translate()</code>.</p> -<h3 id="A_rotate_example" name="A_rotate_example">Пример использования<code>rotate</code></h3> +<h3 id="A_rotate_example">Пример использования<code>rotate</code></h3> <p>В этом примере мы сначала используем <code>rotate()</code> для поворота прямоугольника относительно начала координат, а затем, используя <code>translate()</code> совместно с <code>rotate()</code> поворачиваем прямоугольник относительно его центра.</p> @@ -166,7 +166,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <p>{{EmbedLiveSample("A_rotate_example", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}</p> -<h2 id="Scaling" name="Scaling">Масштабирование</h2> +<h2 id="Scaling">Масштабирование</h2> <p>Следующий метод трансформации холста - scaling. Он используется для растяжения, сжатия и отражения координатной сетки. Он может использоваться для отрисовки растянутых или сжатых по осям фигур и изображений.</p> @@ -179,7 +179,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <p>По умолчанию единица координатной сетки точно соответствует одному пикселю. Если же вы, например, зададите масштабный коэффициент 0.5, то единица сетки будет равна половине пикселя, и нарисованная фигура будет иметь размер в два раза меньше оригинала. Наоборот, если задать масштабный коэффициент 2.0, единица сетки будет соответствовать двум пикселям, а нарисованная фигура станет в два раза больше.</p> -<h3 id="A_scale_example" name="A_scale_example">Пример использования <code>scale</code></h3> +<h3 id="A_scale_example">Пример использования <code>scale</code></h3> <p>В этом примере мы нарисуем прямоугольники, используя разные масштабные коэффициенты.</p> @@ -208,7 +208,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <p>{{EmbedLiveSample("A_scale_example", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}</p> -<h2 id="Transforms" name="Transforms">Матричное преобразование</h2> +<h2 id="Transforms">Матричное преобразование</h2> <p>В заключении рассмотрим метод, который вызывает изменения в соответствии с матрицей преобразования.</p> |