diff options
Diffstat (limited to 'files/ru/web/api/canvas_api/tutorial')
6 files changed, 22 insertions, 22 deletions
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> |