aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/api/canvas_api/tutorial/using_images
diff options
context:
space:
mode:
authorAlexey Istomin <webistomin@gmail.com>2021-03-20 18:37:44 +0300
committerGitHub <noreply@github.com>2021-03-20 18:37:44 +0300
commit841aae260382e2bf5ebb44d765d8c7301d27caab (patch)
tree81a92c25f6dc02e5f119131785d721db79fc3455 /files/ru/web/api/canvas_api/tutorial/using_images
parent730fea852ff827ca034fe17c84288c95d270ec92 (diff)
downloadtranslated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.gz
translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.bz2
translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.zip
Restore "ё" letter in Russian translation (#239)
* docs(ru): restore ё letter * docs(ru): resolve conflicts * refactor(idea): remove ide folder
Diffstat (limited to 'files/ru/web/api/canvas_api/tutorial/using_images')
-rw-r--r--files/ru/web/api/canvas_api/tutorial/using_images/index.html22
1 files changed, 11 insertions, 11 deletions
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 65470e1d07..c8e40a0c5f 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
@@ -9,7 +9,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Использование_изобр
<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Трансформации")}}</div>
<div class="summary">
-<p>До сих пор мы создавали наши собственные фигуры и применяли стили к ним. Одна из самых впечатляющих функций {{HTMLElement("canvas")}} это возможность использования изображений. Они могут быть использованы для динамического композитинга фото или как фоны графиков, для спрайтов в играх, и так далее. Внешние изображения могут быть использованы в любых поддерживаемых браузером форматах, таких как PNG, GIF, или JPEG. Вы можете даже использовать изображение, произведенное другими canvas элементами на той же странице как источник!</p>
+<p>До сих пор мы создавали наши собственные фигуры и применяли стили к ним. Одна из самых впечатляющих функций {{HTMLElement("canvas")}} это возможность использования изображений. Они могут быть использованы для динамического композитинга фото или как фоны графиков, для спрайтов в играх, и так далее. Внешние изображения могут быть использованы в любых поддерживаемых браузером форматах, таких как PNG, GIF, или JPEG. Вы можете даже использовать изображение, произведённое другими canvas элементами на той же странице как источник!</p>
</div>
<p>Импортирование изображений в canvas в основном состоит из 2 этапов:</p>
@@ -62,15 +62,15 @@ original_slug: Web/API/Canvas_API/Tutorial/Использование_изобр
<p>Другой способ это создать новые {{domxref("HTMLImageElement")}} объекты в нашем скрипте.  Чтобы это сделать, вы можете использовать удобный <code>Image()</code> конструктор:</p>
-<pre class="brush: js">var img = new Image(); // Создает новый элемент изображения
+<pre class="brush: js">var img = new Image(); // Создаёт новый элемент изображения
img.src = 'myImage.png'; // Устанавливает путь
</pre>
-<p>Когда этот скрипт выполнится, изображение начнет загружаться.</p>
+<p>Когда этот скрипт выполнится, изображение начнёт загружаться.</p>
<p>Если вы попытаетесь вызвать функцию <code>drawImage()</code> перед тем как изображение загрузится, то скрипт ничего не сделает (или, в старых браузерах, может даже выдать исключение). Поэтому вам необходимо использовать событие load, чтобы вы не пытались сделать это прежде, чем изображение загрузится:</p>
-<pre class="brush: js">var img = new Image(); // Создает новое изображение
+<pre class="brush: js">var img = new Image(); // Создаёт новое изображение
img.addEventListener("load", function() {
// здесь выполняет drawImage функцию
}, false);
@@ -83,7 +83,7 @@ img.src = 'myImage.png'; // Устанавливает источник файл
<p>Другой возможный способ включить изображение это через <a class="external" href="/en-US/docs/Web/HTTP/data_URIs" rel="external" title="http://en.wikipedia.org/wiki/Data:_URL">data: url</a>. Data URLs позволяет вам полностью определить изображение как Base64 кодированную строку символов прямо в ваш код.</p>
-<pre class="brush: js">var img = new Image(); // Создает новый элемент img
+<pre class="brush: js">var img = new Image(); // Создаёт новый элемент img
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
</pre>
@@ -105,7 +105,7 @@ img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAs
}
</pre>
-<p>Эта функция вернет {{domxref("HTMLVideoElement")}} объект для этого видео, который, как мы упоминали ранее, является одним из объектов, который можно использовать как <code>CanvasImageSource</code>.</p>
+<p>Эта функция вернёт {{domxref("HTMLVideoElement")}} объект для этого видео, который, как мы упоминали ранее, является одним из объектов, который можно использовать как <code>CanvasImageSource</code>.</p>
<h2 id="Рисование_изображений">Рисование изображений</h2>
@@ -154,7 +154,7 @@ img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAs
<h2 id="Изменение_размеров">Изменение размеров</h2>
-<p>Второй вариант метода <code>drawImage()</code> добавляет два новых параметра и позволяет разместить изображение в  canvas с измененными размерами.</p>
+<p>Второй вариант метода <code>drawImage()</code> добавляет два новых параметра и позволяет разместить изображение в  canvas с изменёнными размерами.</p>
<dl>
<dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}</dt>
@@ -163,7 +163,7 @@ img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAs
<h3 id="Пример_Тайлинг_изображения">Пример: Тайлинг изображения</h3>
-<p>В этом примере, мы будем использовать изображение в качестве обоев и повторим его в canvas несколько раз. Это может быть сделано просто через цикл, располагая измененные изображения на разных позициях. В коде внизу, первый цикл <code>for</code> проходит по рядам. Второй цикл <code>for</code> проходит по колонкам. Изображение уменьшено на треть от реального размера, которое было  50x38 пикселей.</p>
+<p>В этом примере, мы будем использовать изображение в качестве обоев и повторим его в canvas несколько раз. Это может быть сделано просто через цикл, располагая изменённые изображения на разных позициях. В коде внизу, первый цикл <code>for</code> проходит по рядам. Второй цикл <code>for</code> проходит по колонкам. Изображение уменьшено на треть от реального размера, которое было  50x38 пикселей.</p>
<div class="note">
<p><strong>Обратите внимание</strong>: Изображения могут стать размытыми, при большом увеличении или зернистыми при значительном уменьшении. Возможно, лучше всего не изменять размеры изображения, если на них есть текст, который должен остаться читаемым. </p>
@@ -197,7 +197,7 @@ img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAs
<h2 id="Нарезка">Нарезка</h2>
-<p>У третьего и последнего варианта метода <code>drawImage()</code> в дополнении к источнику изображения есть еще восемь параметров . Он позволяет нам вырезать кусок из изображения, затем изменить его размер и нарисовать его в canvas.</p>
+<p>У третьего и последнего варианта метода <code>drawImage()</code> в дополнении к источнику изображения есть ещё восемь параметров . Он позволяет нам вырезать кусок из изображения, затем изменить его размер и нарисовать его в canvas.</p>
<dl>
<dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}</dt>
@@ -210,7 +210,7 @@ img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAs
<h3 id="Пример_Обрамление_изображения">Пример: Обрамление изображения</h3>
-<p>В этом примере, мы будем использовать того же носорога, что и в предыдущем примере, но мы отрежем его голову и включим ее в рамку. Изображение рамки это 24-х битный PNG, который включает падающую тень. Так как в 24-х битные PNG изображения включается полный 8-ми битный альфа-канал, в отличие от GIF и 8-битных PNG изображений, он может быть помещен в любой фон, без беспокойства о матовом цвете. </p>
+<p>В этом примере, мы будем использовать того же носорога, что и в предыдущем примере, но мы отрежем его голову и включим её в рамку. Изображение рамки это 24-х битный PNG, который включает падающую тень. Так как в 24-х битные PNG изображения включается полный 8-ми битный альфа-канал, в отличие от GIF и 8-битных PNG изображений, он может быть помещён в любой фон, без беспокойства о матовом цвете. </p>
<pre class="brush: html">&lt;html&gt;
 &lt;body onload="draw();"&gt;
@@ -300,7 +300,7 @@ td {
// Не добавляет canvas для изображения рамки
if (document.images[i].getAttribute('id')!='frame'){
- // Создает элемент canvas
+ // Создаёт элемент canvas
var canvas = document.createElement('canvas');
canvas.setAttribute('width',132);
canvas.setAttribute('height',150);