aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/api/canvas_api/tutorial
diff options
context:
space:
mode:
authorAlexey Pyltsyn <lex61rus@gmail.com>2021-03-15 14:29:50 +0300
committerAlexey Pyltsyn <lex61rus@gmail.com>2021-03-15 14:29:50 +0300
commit55ddd4454665a3c66e3d5b186bc79048468d36e7 (patch)
tree5391f1ae01bbcd484387bbc2373492ac9bc89dbc /files/ru/web/api/canvas_api/tutorial
parent08dc1a1e60063705ccefc1eb4ef0a17d1ddf196b (diff)
downloadtranslated-content-55ddd4454665a3c66e3d5b186bc79048468d36e7.tar.gz
translated-content-55ddd4454665a3c66e3d5b186bc79048468d36e7.tar.bz2
translated-content-55ddd4454665a3c66e3d5b186bc79048468d36e7.zip
Auto fixes
Diffstat (limited to 'files/ru/web/api/canvas_api/tutorial')
-rw-r--r--files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html2
-rw-r--r--files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html2
-rw-r--r--files/ru/web/api/canvas_api/tutorial/basic_animations/index.html2
-rw-r--r--files/ru/web/api/canvas_api/tutorial/basic_usage/index.html2
-rw-r--r--files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html2
-rw-r--r--files/ru/web/api/canvas_api/tutorial/drawing_text/index.html2
-rw-r--r--files/ru/web/api/canvas_api/tutorial/finale/index.html8
-rw-r--r--files/ru/web/api/canvas_api/tutorial/index.html2
-rw-r--r--files/ru/web/api/canvas_api/tutorial/transformations/index.html6
-rw-r--r--files/ru/web/api/canvas_api/tutorial/using_images/index.html4
10 files changed, 16 insertions, 16 deletions
diff --git a/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html
index f9dc3f7a3e..a1b7b04467 100644
--- a/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html
+++ b/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html
@@ -153,7 +153,7 @@ ball.draw();</pre>
<h2 id="Ускорение">Ускорение</h2>
-<p>Чтобы сделать движение более реальным, вы можете играть со скоростью, нпример так:</p>
+<p>Чтобы сделать движение более реальным, вы можете играть со скоростью, например так:</p>
<pre class="brush: js">ball.vy *= .99;
ball.vy += .25;</pre>
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 3dc5e6c8f0..7eea729bc2 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
@@ -109,7 +109,7 @@ ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.fillStyle = "rgba(255,0,0,0.5)";
</pre>
-<p>Функция <code>rgba()</code> похожа на функцию <code>rgb()</code>, но имеет один дополнительный параметр. Последний параметр устанавливает значение прозрачности для конкретного цвета. Действующий диапозон значений находится между 0.0 (полная прозрачность) и 1.0 (полная непрозрачность).</p>
+<p>Функция <code>rgba()</code> похожа на функцию <code>rgb()</code>, но имеет один дополнительный параметр. Последний параметр устанавливает значение прозрачности для конкретного цвета. Действующий диапазон значений находится между 0.0 (полная прозрачность) и 1.0 (полная непрозрачность).</p>
<h3 id="Пример_globalAlpha">Пример <code>globalAlpha</code></h3>
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 e4595cbbd4..652938c355 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
@@ -53,7 +53,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Основы_анимации
<dd>Сообщает браузеру, что вы хотите выполнить анимацию, и запрашивает, чтобы браузер вызвал указанную функцию <code>callback</code> для обновления анимации перед следующей перерисовкой.</dd>
</dl>
-<p>Если вы не планируете никакого взаимодействия с пользователем, вы можете использовать функцию <code>setInterval()</code> , которая многократно выполняет, предоставленный ей код. Если же вы планиуете создать игру, в которой контроль анимации осуществляется мышью или клавиатурой, то необходимо использовать  <code>setTimeout()</code>. Установив {{domxref("EventListener")}}, вы можете перехватываете любые действия пользователя и запустить соответствующие функции анимации.</p>
+<p>Если вы не планируете никакого взаимодействия с пользователем, вы можете использовать функцию <code>setInterval()</code> , которая многократно выполняет, предоставленный ей код. Если же вы планируете создать игру, в которой контроль анимации осуществляется мышью или клавиатурой, то необходимо использовать  <code>setTimeout()</code>. Установив {{domxref("EventListener")}}, вы можете перехватываете любые действия пользователя и запустить соответствующие функции анимации.</p>
<div class="note">
<p>В примерах ниже мы будем использовать функцию {{domxref("window.requestAnimationFrame()")}} для контроля анимации. Функция <code>requestAnimationFrame</code> является более эффективной для создания анимации, так как новая итерация вызывается, когда система готова к отрисовке нового кадра. Количество вызовов в секунду примерно равно 60 и уменьшается, когда вкладка неактивна. Для более подробного изучения цикла анимации, особенно для игр, прочитайте статью <a href="/en-US/docs/Games/Anatomy">Анатомия видеоигр </a>В <a href="/en-US/docs/Games">Зоне разработке игр</a>.</p>
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
index 3c32d75985..78937ccfac 100644
--- a/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html
+++ b/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html
@@ -54,7 +54,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
<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>
+<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');
diff --git a/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html
index 046e249975..5b9e81bd3d 100644
--- a/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html
+++ b/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html
@@ -183,7 +183,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур
<p>{{EmbedLiveSample("Передвижение_пера", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p>
-<p>Если вы захотите увидеть соединные линии, то можете удалить вызов <code>moveTo()</code>.</p>
+<p>Если вы захотите увидеть соединение линии, то можете удалить вызов <code>moveTo()</code>.</p>
<div class="note">
<p><strong>Note:</strong> Подробнее о функции <code>arc()</code>,посмотрите {{anch("Дуги")}} .</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 c25c49be30..226dfc1e21 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
@@ -5,7 +5,7 @@ tags:
- Canvas
- Графика
- Примеры
- - Рукводовство
+ - Руководство
- мануал
translation_of: Web/API/Canvas_API/Tutorial/Drawing_text
original_slug: Web/API/Canvas_API/Tutorial/Рисование_текста
diff --git a/files/ru/web/api/canvas_api/tutorial/finale/index.html b/files/ru/web/api/canvas_api/tutorial/finale/index.html
index 63187795bd..c292176869 100644
--- a/files/ru/web/api/canvas_api/tutorial/finale/index.html
+++ b/files/ru/web/api/canvas_api/tutorial/finale/index.html
@@ -11,7 +11,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Finale
<h2 id="Больше_примеров_и_учебных_материалов">Больше примеров и учебных материалов</h2>
-<p>Различные демки и дополнительные разъяснеия о canvas расположены на этих сайтах:</p>
+<p>Различные демки и дополнительные разъяснения о canvas расположены на этих сайтах:</p>
<dl>
<dt><a href="http://codepen.io/search?q=canvas">Codepen.io</a></dt>
@@ -19,11 +19,11 @@ translation_of: Web/API/Canvas_API/Tutorial/Finale
<dt><a href="http://www.canvasdemos.com/">Canvasdemos.com</a></dt>
<dd>Приложения, игры, инструменты и учебные пособия для HTML5 canvas элементов.</dd>
<dt><a href="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></dt>
- <dd>Примеры для большинтсва canvas APIs.</dd>
+ <dd>Примеры для большинства canvas APIs.</dd>
<dt><a href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 days of Canvas tutorials</a></dt>
<dd>Прекрасное введение в разработку графики на JavaScript.</dd>
<dt><a href="/en-US/docs/Games">Game development</a></dt>
- <dd>Игры - одна из наболее популярных  действий на компьютере. Постоянно появляются новые технологии, делающих возможным разработку более лучших и мощных игр, чем те, которые могли быть созданы стандартными средствами веб браузеров.</dd>
+ <dd>Игры - одна из наиболее популярных  действий на компьютере. Постоянно появляются новые технологии, делающих возможным разработку более лучших и мощных игр, чем те, которые могли быть созданы стандартными средствами веб браузеров.</dd>
</dl>
<h2 id="Другие_Web_API">Другие Web API</h2>
@@ -34,7 +34,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Finale
<dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt>
<dd>API для отображения интерактивной 3D графики.</dd>
<dt><a href="/en-US/docs/Web/SVG">SVG</a></dt>
- <dd>Масштабируемая Векторная Графика (Scalable Vector Graphics) позволяет описывать картинки в виде набора векторов (линий) и  форм, позволяюших плавно изменять размер вне зависимости от размера в котором они нарисованы.</dd>
+ <dd>Масштабируемая Векторная Графика (Scalable Vector Graphics) позволяет описывать картинки в виде набора векторов (линий) и  форм, позволяющих плавно изменять размер вне зависимости от размера в котором они нарисованы.</dd>
<dt><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio</a></dt>
<dd>Web Audio API представляет мощную и универсальную систему контроля аудио в сети, позволяющая разработчикам получить аудио ресурсы, добавлять эффекты аудио, создавать аудио визуализацию,  применять пространственные эффекты (такие как сдвиг) и многое другое.</dd>
</dl>
diff --git a/files/ru/web/api/canvas_api/tutorial/index.html b/files/ru/web/api/canvas_api/tutorial/index.html
index 8409367956..3d6a7e259a 100644
--- a/files/ru/web/api/canvas_api/tutorial/index.html
+++ b/files/ru/web/api/canvas_api/tutorial/index.html
@@ -14,7 +14,7 @@ translation_of: Web/API/Canvas_API/Tutorial
<p>В этом руководстве описываются основы использования элемента <code>&lt;canvas&gt;</code> для рисования 2D-графики. Приведенные примеры дадут вам понимание того, что вы можете сделать с помощью &lt;canvas&gt;, а использованные в статье фрагменты кода помогут в создании собственных проектов.</p>
-<p><code>Впервые &lt;canvas&gt;</code> использовался компанией Apple для создания <a href="https://ru.wikipedia.org/wiki/Dashboard">Mac OS X Dashboard</a>, а затем был реализован в Web-браузерах. На сегодняшний день все основные браузеры поддерживют работу с &lt;canvas&gt;. Тег <code>&lt;canvas&gt;</code> часть спецификации <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> также известной как HTML5.</p>
+<p><code>Впервые &lt;canvas&gt;</code> использовался компанией Apple для создания <a href="https://ru.wikipedia.org/wiki/Dashboard">Mac OS X Dashboard</a>, а затем был реализован в Web-браузерах. На сегодняшний день все основные браузеры поддерживают работу с &lt;canvas&gt;. Тег <code>&lt;canvas&gt;</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>
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 0f871d6909..85acddca88 100644
--- a/files/ru/web/api/canvas_api/tutorial/transformations/index.html
+++ b/files/ru/web/api/canvas_api/tutorial/transformations/index.html
@@ -61,15 +61,15 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations
<p>Сначала рисуется большой прямоугольник с настройками по умолчанию. Затем мы сохраняем состояние холста, после чего изменяем цвет заливки. Затем рисуем второй синий прямоугольник меньшего размера и опять сохраняем состояние. Снова изменяем какие-то настройки и рисуем третий полупрозрачный белый прямоугольник.</p>
-<p>До сих пор наши действия ничем не отличались от тех, что мы делали в предыдущем разделе. Однако, как только мы сделали первый вызов <code>restore(),</code> последнее сохранённое состояние отрисовки было восстановлено из стека, вернув все сохранённые настройки. Если бы мы не сохранили предыдущее состояние, используя <code>save()</code>, нам бы пришлось менять цвет заливки и настройки прозрачности вручную для возврата к предыдущему состоянию. Для каких-нибудь двух простых свойств это, может быть, сделать не так сложно. Но если таких своиств гораздо больше, это чревато очень быстрым разрастанием кода.</p>
+<p>До сих пор наши действия ничем не отличались от тех, что мы делали в предыдущем разделе. Однако, как только мы сделали первый вызов <code>restore(),</code> последнее сохранённое состояние отрисовки было восстановлено из стека, вернув все сохранённые настройки. Если бы мы не сохранили предыдущее состояние, используя <code>save()</code>, нам бы пришлось менять цвет заливки и настройки прозрачности вручную для возврата к предыдущему состоянию. Для каких-нибудь двух простых свойств это, может быть, сделать не так сложно. Но если таких свойств гораздо больше, это чревато очень быстрым разрастанием кода.</p>
-<p>Когда второй вызов <code>restore()</code> сделан, изначальное состояние (то самое, которое было сделано перед первым вызовом <code>save</code>) восстанавливается и последний нарисованный прямоугольник внось становится чёрным.</p>
+<p>Когда второй вызов <code>restore()</code> сделан, изначальное состояние (то самое, которое было сделано перед первым вызовом <code>save</code>) восстанавливается и последний нарисованный прямоугольник вновь становится чёрным.</p>
<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>
-<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/234/Canvas_grid_translate.png" style="float: right;">Первый метод для трасформирования холста <code>translate()</code>. Он используется для перемещения холста в любую точку нашей сетки.</p>
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/234/Canvas_grid_translate.png" style="float: right;">Первый метод для трансформирования холста <code>translate()</code>. Он используется для перемещения холста в любую точку нашей сетки.</p>
<dl>
<dt>{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}</dt>
diff --git a/files/ru/web/api/canvas_api/tutorial/using_images/index.html b/files/ru/web/api/canvas_api/tutorial/using_images/index.html
index d1addb4b7d..65470e1d07 100644
--- a/files/ru/web/api/canvas_api/tutorial/using_images/index.html
+++ b/files/ru/web/api/canvas_api/tutorial/using_images/index.html
@@ -89,7 +89,7 @@ img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAs
<p>Одним из преимуществ data URLs  это то что полученное изображение доступно сразу без других запросов туда-обратно на сервер. Другое потенциальное преимущество в том, что также можно инкапсулировать всё в одном файле все ваши <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a>, и изображения, что делает его более портативным в других местах.</p>
-<p>Некоторые недостатки этого метода в том что ваше изображение не кешировано, и для изображений с большим размером кодированние url может стать очень долгим процессом.</p>
+<p>Некоторые недостатки этого метода в том что ваше изображение не кешировано, и для изображений с большим размером кодирование url может стать очень долгим процессом.</p>
<h3 id="Использование_кадров_из_видео">Использование кадров из видео</h3>
@@ -243,7 +243,7 @@ img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAs
<h2 id="Пример_галереи_искусства">Пример галереи искусства</h2>
-<p>В последнем примере этой главы, мы построим небольшую галлерею искусств. Галерея состоит из таблицы, включающей несколько изображений. Когда страница загрузится,  {{HTMLElement("canvas")}}  элемент вставится в каждое изображение, а вокруг будет нарисована рамка. </p>
+<p>В последнем примере этой главы, мы построим небольшую галерею искусств. Галерея состоит из таблицы, включающей несколько изображений. Когда страница загрузится,  {{HTMLElement("canvas")}}  элемент вставится в каждое изображение, а вокруг будет нарисована рамка. </p>
<p>В этом случае, у каждого изображения фиксированная ширина и высота, такая же, как и у рамки нарисованной вокруг них.  Вы могли бы усовершенствовать этот скрипт так, чтобы он использовал ширину и высоту изображения, чтобы рамка идеально его окружила.</p>