diff options
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.html | 22 |
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"><html> <body onload="draw();"> @@ -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); |