diff options
| author | Alexey Pyltsyn <lex61rus@gmail.com> | 2021-10-27 02:31:24 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-10-27 02:31:24 +0300 |
| commit | 980fe00a74a9ad013b945755415ace2e5429c3c2 (patch) | |
| tree | a1c6bb4b302e69bfa53eab13e44500eba55d1696 /files/ru/web/api/canvas_api | |
| parent | 374a039b97a11ee7306539d16aaab27fed66b398 (diff) | |
| download | translated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.tar.gz translated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.tar.bz2 translated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.zip | |
[RU] Remove notranslate (#2874)
Diffstat (limited to 'files/ru/web/api/canvas_api')
6 files changed, 117 insertions, 117 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 44f0185bad..8c1a771764 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 @@ -6,17 +6,17 @@ translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</div> <div class="summary"> -<p><span class="notranslate">В предыдущей главе мы сделали несколько <a href="/ru/docs/Web/API/Canvas_API/Tutorial/Basic_animations">базовых анимаций</a> и узнали, как можно двигать вещи.</span> <span class="notranslate"> В этой части мы более подробно рассмотрим само движение и собираемся добавить некоторую физику, чтобы сделать наши анимации более продвинутыми.</span></p> +<p><span>В предыдущей главе мы сделали несколько <a href="/ru/docs/Web/API/Canvas_API/Tutorial/Basic_animations">базовых анимаций</a> и узнали, как можно двигать вещи.</span> <span> В этой части мы более подробно рассмотрим само движение и собираемся добавить некоторую физику, чтобы сделать наши анимации более продвинутыми.</span></p> </div> -<h2 id="Рисование_мяча"><span class="notranslate">Рисование мяча</span></h2> +<h2 id="Рисование_мяча"><span>Рисование мяча</span></h2> -<p><span class="notranslate">Мы собираемся использовать шар для наших анимационных исследований, поэтому давайте сначала нарисуем этот шар на </span><code> canvas</code><span class="notranslate">.</span> Нам нужен следующий код.</p> +<p><span>Мы собираемся использовать шар для наших анимационных исследований, поэтому давайте сначала нарисуем этот шар на </span><code> canvas</code><span>.</span> Нам нужен следующий код.</p> <pre class="brush: html"><canvas id="canvas" width="600" height="300"></canvas> </pre> -<p><span class="notranslate">Как обычно, нам нужен контекст рисования.</span> Чтобы нарисовать шар, мы создадим объект <code>ball</code>, который содержит свойства и метод <code>draw()</code> , чтобы нарисовать его на <code>canvas</code>.</p> +<p><span>Как обычно, нам нужен контекст рисования.</span> Чтобы нарисовать шар, мы создадим объект <code>ball</code>, который содержит свойства и метод <code>draw()</code> , чтобы нарисовать его на <code>canvas</code>.</p> <pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); @@ -37,11 +37,11 @@ var ball = { ball.draw();</pre> -<p><span class="notranslate">Здесь нет ничего особенного, шар на самом деле представляет собой простой круг и рисуется с помощью метода</span> {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.</p> +<p><span>Здесь нет ничего особенного, шар на самом деле представляет собой простой круг и рисуется с помощью метода</span> {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.</p> -<h2 id="Добавление_скорости"><span class="notranslate">Добавление скорости</span></h2> +<h2 id="Добавление_скорости"><span>Добавление скорости</span></h2> -<p>Теперь, когда у нас есть шар, мы готовы добавить базовую анимацию, как мы узнали из последней <a href="/ru/docs/Web/API/Canvas_API/Tutorial/Basic_animations">главы</a> этого урока. <span class="notranslate">Опять же,</span> {{domxref("window.requestAnimationFrame()")}} <span class="notranslate">помогает нам контролировать анимацию.</span> <span class="notranslate">Мяч перемещается, добавляя вектор скорости в положение.</span> <span class="notranslate">Для каждого кадра мы также</span> {{domxref("CanvasRenderingContext2D.clearRect", "очищаем", "", 1)}} <span class="notranslate"> холст, чтобы удалить старые круги из предыдущих кадров.</span></p> +<p>Теперь, когда у нас есть шар, мы готовы добавить базовую анимацию, как мы узнали из последней <a href="/ru/docs/Web/API/Canvas_API/Tutorial/Basic_animations">главы</a> этого урока. <span>Опять же,</span> {{domxref("window.requestAnimationFrame()")}} <span>помогает нам контролировать анимацию.</span> <span>Мяч перемещается, добавляя вектор скорости в положение.</span> <span>Для каждого кадра мы также</span> {{domxref("CanvasRenderingContext2D.clearRect", "очищаем", "", 1)}} <span> холст, чтобы удалить старые круги из предыдущих кадров.</span></p> <pre class="brush: js; highlight:[8,9,24,25]">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); @@ -82,9 +82,9 @@ canvas.addEventListener('mouseout', function(e) { ball.draw(); </pre> -<h2 id="Границы"><span class="notranslate" style="background-color: #e6ecf9;">Границы</span></h2> +<h2 id="Границы"><span style="background-color: #e6ecf9;">Границы</span></h2> -<p><span class="notranslate">Без какого-либо граничного коллизионного тестирования наш мяч быстро выбегает из холста.</span> <span class="notranslate"> Нам нужно проверить, не находятся ли <code>x</code> и <code>y</code> положения шара вне размеров холста и не инвертируют направление векторов скорости.</span> <span class="notranslate"> Для этого мы добавим следующие проверки в метод <code>draw</code> :</span></p> +<p><span>Без какого-либо граничного коллизионного тестирования наш мяч быстро выбегает из холста.</span> <span> Нам нужно проверить, не находятся ли <code>x</code> и <code>y</code> положения шара вне размеров холста и не инвертируют направление векторов скорости.</span> <span> Для этого мы добавим следующие проверки в метод <code>draw</code> :</span></p> <pre class="brush: js">if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; @@ -93,9 +93,9 @@ if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; }</pre> -<h3 id="Первое_демо"><span class="notranslate">Первое демо</span></h3> +<h3 id="Первое_демо"><span>Первое демо</span></h3> -<p><span class="notranslate">Посмотрим, как он выглядит в действии.</span> <span class="notranslate"> Переместите мышь на холст, чтобы запустить анимацию.</span></p> +<p><span>Посмотрим, как он выглядит в действии.</span> <span> Переместите мышь на холст, чтобы запустить анимацию.</span></p> <div class="hidden"> <pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> @@ -158,7 +158,7 @@ ball.draw();</pre> <pre class="brush: js">ball.vy *= .99; ball.vy += .25;</pre> -<p><span class="notranslate">Это замедляет вертикальную скорость каждого кадра, так что мяч будет просто отскакивать от пола в конце.</span></p> +<p><span>Это замедляет вертикальную скорость каждого кадра, так что мяч будет просто отскакивать от пола в конце.</span></p> <div class="hidden"> <h6 id="Second_demo">Second demo</h6> @@ -284,9 +284,9 @@ ball.draw();</pre> <p>{{EmbedLiveSample("Third_demo", "610", "310")}}</p> -<h2 id="Добавление_управления_мышью"><span class="notranslate" style="background-color: #e6ecf9;">Добавление управления мышью</span></h2> +<h2 id="Добавление_управления_мышью"><span style="background-color: #e6ecf9;">Добавление управления мышью</span></h2> -<p>Чтобы получить некоторый контроль над мячом, мы можем заставить его следовать за нашей мышью, например, с помощью события<span class="notranslate"> <code><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=ru&rurl=translate.google.com&sl=en&sp=nmt4&tl=ru&u=https://developer.mozilla.org/en-US/docs/Web/Reference/Events/mousemove&usg=ALkJrhhcJqJN-yKD36pH8RkWQhb3uewyBA">mousemove</a></code> .</span> <span class="notranslate"> Событие <code><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=ru&rurl=translate.google.com&sl=en&sp=nmt4&tl=ru&u=https://developer.mozilla.org/en-US/docs/Web/Events/click&usg=ALkJrhi9Rqodjh09zJQ7RSZkVNVqMZ5zhw">click</a></code></span> отпускает мяч и позволяет ему снова прыгать</p> +<p>Чтобы получить некоторый контроль над мячом, мы можем заставить его следовать за нашей мышью, например, с помощью события<span> <code><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=ru&rurl=translate.google.com&sl=en&sp=nmt4&tl=ru&u=https://developer.mozilla.org/en-US/docs/Web/Reference/Events/mousemove&usg=ALkJrhhcJqJN-yKD36pH8RkWQhb3uewyBA">mousemove</a></code> .</span> <span> Событие <code><a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=ru&rurl=translate.google.com&sl=en&sp=nmt4&tl=ru&u=https://developer.mozilla.org/en-US/docs/Web/Events/click&usg=ALkJrhi9Rqodjh09zJQ7RSZkVNVqMZ5zhw">click</a></code></span> отпускает мяч и позволяет ему снова прыгать</p> <div class="hidden"> <pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> @@ -358,7 +358,7 @@ canvas.addEventListener('mouseout', function(e) { ball.draw(); </pre> -<p><span class="notranslate">Переместите шар с помощью мыши и отпустите его одним щелчком.</span></p> +<p><span>Переместите шар с помощью мыши и отпустите его одним щелчком.</span></p> <p>{{EmbedLiveSample("Добавление_управления_мышью", "610", "310")}}</p> 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 c17cdbedca..e82a99b84c 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 @@ -29,7 +29,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Применение_стилей_и_ <p>Чтобы строка <em><code>color </code></em>считалась валидной, она должна соответствовать CSS {{cssxref("<color>")}}. Далее приведены примеры того, как можно по-разному задать один и тот же цвет. </p> -<pre class="brush: js notranslate">// these all set the fillStyle to 'orange' +<pre class="brush: js">// these all set the fillStyle to 'orange' ctx.fillStyle = "orange"; ctx.fillStyle = "#FFA500"; @@ -41,7 +41,7 @@ ctx.fillStyle = "rgba(255,165,0,1)"; <p>В этом примере мы опять воспользуемся двойным циклом, чтобы нарисовать сетку из прямоугольников, каждый из которых имеет свой цвет. Окончательное изображение должно иметь вид, как показано на скриншоте. Здесь не происходит ничего сверхъестественного. Мы используем две переменные <code>i</code> и <code>j</code> для генерации уникального RGB цвета для каждого квадрата и изменяем только красные и зелёные значения. Синий канал представляет собой фиксированное значение. Путём изменения каналов вы можете генерировать всю палитру. Увеличив количество шагов вы можете достигнуть такого вида палитры, какая используется в Photoshop.</p> -<pre class="brush: js;highlight[5,6] notranslate">function draw() { +<pre class="brush: js;highlight[5,6]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i=0;i<6;i++){ for (var j=0;j<6;j++){ @@ -53,9 +53,9 @@ ctx.fillStyle = "rgba(255,165,0,1)"; }</pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>Результат выглядит так:</p> @@ -66,7 +66,7 @@ ctx.fillStyle = "rgba(255,165,0,1)"; <p>Этот пример похож на предыдущий, но мы используем свойство <code>strokeStyle</code> чтобы изменить цвета очертаний фигур. Так же мы используем метод <code>arc()</code> для рисования окружностей вместо квадратов.</p> -<pre class="brush: js;highlight[5,6] notranslate"> function draw() { +<pre class="brush: js;highlight[5,6]"> function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i=0;i<6;i++){ for (var j=0;j<6;j++){ @@ -81,9 +81,9 @@ ctx.fillStyle = "rgba(255,165,0,1)"; </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>Результат выглядит так:</p> @@ -103,7 +103,7 @@ ctx.fillStyle = "rgba(255,165,0,1)"; <p>Так как свойства <code>strokeStyle</code> и <code>fillStyle</code> принимают цветовые значения rgba через CSS, мы можем использовать следующее обозначение для назначения прозрачных цветов.</p> -<pre class="brush: js notranslate">// Assigning transparent colors to stroke and fill style +<pre class="brush: js">// Assigning transparent colors to stroke and fill style ctx.strokeStyle = "rgba(255,0,0,0.5)"; ctx.fillStyle = "rgba(255,0,0,0.5)"; @@ -115,7 +115,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <p>В данном примере мы нарисуем фон и четыре квадрата с различными цветами. Сверху изображения будет выведен набор полупрозрачных кругов. Установим свойство <code>globalAlpha</code> значением 0.2, которое будет использовано для всех последующих форм. Каждый шаг цикла рисует круг с большим радиусом. По окончанию получим радиальный градиент. Накладывая ещё больше кругов друг на друга, мы фактически сможем уменьшить прозрачность ранее нарисованных кругов. Увеличив счётчик итераций, при этом рисуя ещё круги, мы сможем добиться исчезновение центра изображения.</p> -<pre class="brush: js;highlight[15] notranslate">function draw() { +<pre class="brush: js;highlight[15]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // фон изображения ctx.fillStyle = '#FD0'; @@ -140,9 +140,9 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; }</pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_globalAlpha", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p> @@ -151,7 +151,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <p>В этом втором примере мы делаем что-то похожее на предыдущее, но вместо рисования кругов друг над другом, я рисовал маленькие прямоугольники с увеличением непрозрачности. Использование <code>rgba()</code> добавляет контроля и гибкости, поскольку мы можем индивидуально настраивать стиль заливки и штриха.</p> -<pre class="brush: js;highlight[16] notranslate">function draw() { +<pre class="brush: js;highlight[16]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // Нарисовать фон @@ -174,9 +174,9 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; }</pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_использования_rgba", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p> @@ -212,7 +212,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <p>В приведённом ниже примере 10 прямых линий рисуются с увеличением ширины линий. Линия в крайнем левом углу - 1.0 единицы. Тем не менее, толщина левой и всех других линий нечётной ширины не выглядят чёткими из-за позиционирования пути.</p> -<pre class="brush: js;highlight[4] notranslate">function draw() { +<pre class="brush: js;highlight[4]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i = 0; i < 10; i++){ ctx.lineWidth = 1+i; @@ -225,9 +225,9 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_lineWidth", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}</p> @@ -269,7 +269,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <p>Строка слева использует <code>butt</code> опцию по умолчанию. Вы заметите, что она полностью очищена от направляющих. Второй вариант - <code>round</code> опция. Это добавляет полукруг к концу, который имеет радиус, равный половине ширины линии. Строка справа использует <code>square</code> опцию. Это добавляет поле с равной шириной и половиной высоты толщины линии.</p> -<pre class="brush: js;highlight[18] notranslate">function draw() { +<pre class="brush: js;highlight[18]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var lineCap = ['butt','round','square']; @@ -296,9 +296,9 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_lineCap", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p> @@ -322,7 +322,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <p>В приведённом ниже примере показаны три разных пути, демонстрирующие каждый из этих трёх свойств <code>lineJoin</code>; результат - выше. </p> -<pre class="brush: js;highlight[6] notranslate">function draw() { +<pre class="brush: js;highlight[6]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var lineJoin = ['round','bevel','miter']; ctx.lineWidth = 10; @@ -340,9 +340,9 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_lineJoin", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p> @@ -367,7 +367,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; <p>Если вы укажете в этой демонстрации значение <code>miterLimit</code> ниже 4.2, ни один из видимых углов не присоединится к расширению митры, но только с небольшим скосом рядом с синими линиями; с отметкой <code>miterLimit</code> выше 10, большинство углов в этой демонстрации должны соединяться с митрой, удалённой от синих линий, высота которой уменьшается между углами слева направо, потому что они соединяются с растущими углами; с промежуточными значениями углы с левой стороны будут соединяться только с скосом рядом с синими линиями, а углы с правой стороны с удлинителем митры (также с уменьшающейся высотой).</p> -<pre class="brush: js;highlight[18] notranslate">function draw() { +<pre class="brush: js;highlight[18]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // Clear canvas @@ -402,7 +402,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; </pre> <div class="hidden"> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <tr> <td><canvas id="canvas" width="150" height="150"></canvas></td> <td>Change the <code>miterLimit</code> by entering a new value below and clicking the redraw button.<br><br> @@ -415,7 +415,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)"; </tr> </table></pre> -<pre class="brush: js notranslate">document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit; +<pre class="brush: js">document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit; draw();</pre> </div> @@ -428,10 +428,10 @@ draw();</pre> <p>В этом примере мы создаём эффект походных муравьёв. Это техника анимации, часто встречающаяся в инструментах выбора программ компьютерной графики. Это помогает пользователю отличить границу выделения от фона изображения, анимируя границу. В следующей части этого руководства вы узнаете, как сделать эту и другие основные анимации.</p> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="110" height="110"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="110" height="110"></canvas></pre> </div> -<pre class="brush: js;highlight[6] notranslate">var ctx = document.getElementById('canvas').getContext('2d'); +<pre class="brush: js;highlight[6]">var ctx = document.getElementById('canvas').getContext('2d'); var offset = 0; function draw() { @@ -467,7 +467,7 @@ march();</pre> <p>For example:</p> -<pre class="brush: js notranslate">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); +<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100); </pre> @@ -480,7 +480,7 @@ var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100); <p>You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.</p> -<pre class="brush: js notranslate">var lineargradient = ctx.createLinearGradient(0,0,150,150); +<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0,0,150,150); lineargradient.addColorStop(0, 'white'); lineargradient.addColorStop(1, 'black'); </pre> @@ -489,7 +489,7 @@ lineargradient.addColorStop(1, 'black'); <p>In this example, we'll create two different gradients. As you can see here, both the <code>strokeStyle</code> and <code>fillStyle</code> properties can accept a <code>canvasGradient</code> object as valid input.</p> -<pre class="brush: js;highlight[5,11] notranslate">function draw() { +<pre class="brush: js;highlight[5,11]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // Create gradients @@ -515,9 +515,9 @@ lineargradient.addColorStop(1, 'black'); </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn't matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won't be a problem.</p> @@ -530,7 +530,7 @@ lineargradient.addColorStop(1, 'black'); <p>In this example, we'll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the "classic" radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).</p> -<pre class="brush: js;highlight[5,10,15,20] notranslate">function draw() { +<pre class="brush: js;highlight[5,10,15,20]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // Create gradients @@ -567,9 +567,9 @@ lineargradient.addColorStop(1, 'black'); </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.</p> @@ -602,7 +602,7 @@ lineargradient.addColorStop(1, 'black'); <p>Мы используем этот метод, чтобы создать {{domxref("CanvasPattern")}} объект, который очень похож на методы градиента, рассмотренные ранее. Как только мы создали шаблон, мы можем назначить ему свойства <code>fillStyle</code> или <code>strokeStyle</code>. Например:</p> -<pre class="brush: js notranslate">var img = new Image(); +<pre class="brush: js">var img = new Image(); img.src = 'someimage.png'; var ptrn = ctx.createPattern(img,'repeat'); </pre> @@ -615,7 +615,7 @@ var ptrn = ctx.createPattern(img,'repeat'); <p>In this last example, we'll create a pattern to assign to the <code>fillStyle</code> property. The only thing worth noting is the use of the image's <code>onload</code> handler. This is to make sure the image is loaded before it is assigned to the pattern.</p> -<pre class="brush: js;highlight[10] notranslate">function draw() { +<pre class="brush: js;highlight[10]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // create new image object to use as pattern @@ -633,9 +633,9 @@ var ptrn = ctx.createPattern(img,'repeat'); </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> <p>The result looks like this:</p> </div> @@ -671,7 +671,7 @@ var ptrn = ctx.createPattern(img,'repeat'); <p>This example draws a text string with a shadowing effect.</p> -<pre class="brush: js;highlight[4,5,6,7] notranslate">function draw() { +<pre class="brush: js;highlight[4,5,6,7]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.shadowOffsetX = 2; @@ -686,9 +686,9 @@ var ptrn = ctx.createPattern(img,'repeat'); </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="80"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="80"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_текста_с_тенью", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p> @@ -708,7 +708,7 @@ var ptrn = ctx.createPattern(img,'repeat'); <p>In this example we are using the <code>evenodd</code> rule.</p> -<pre class="brush: js;highlight[6] notranslate">function draw() { +<pre class="brush: js;highlight[6]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.beginPath(); ctx.arc(50, 50, 30, 0, Math.PI*2, true); @@ -717,9 +717,9 @@ var ptrn = ctx.createPattern(img,'repeat'); }</pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="100" height="100"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="100" height="100"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}</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 0d71e6b16b..89d79cedf3 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 @@ -11,7 +11,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Basic_usage <h2 id="Элемент_<canvas>">Элемент <code><canvas></code></h2> -<pre class="brush: html notranslate"><canvas id="tutorial" width="150" height="150"></canvas> +<pre class="brush: html"><canvas id="tutorial" width="150" height="150"></canvas> </pre> <p>Он выглядит как элемент <code><img></code>, но его отличие в том, что он не имеет атрибутов <code>src</code> и <code>alt</code>. Элемент <code><canvas></code> имеет только два атрибута - <strong>ширину</strong> и <strong>высоту</strong>. Оба они не обязательны и могут быть выставлены с использованием свойств <a href="/en-US/docs/DOM" rel="internal" title="en/DOM">DOM</a>. Если атрибуты высоты и ширины не установлены, canvas будет по умолчанию шириной <strong>300 пикселей</strong> и в высоту <strong>150 пикселей</strong>. Вы так же можете выставить размеры произвольно в <a href="/en-US/docs/Web/CSS" rel="internal" title="en/CSS">CSS</a>, но во время рендеринга изображение будет масштабироваться в соответствии с его размером и ориентацией.</p> @@ -33,7 +33,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Basic_usage <p>Например, мы можем предоставить текстовое описание содержимого canvas или предоставить статичное изображение динамически отображаемого содержимого. Это может выглядеть как-то так:</p> -<pre class="brush: html notranslate"><canvas id="stockGraph" width="150" height="150"> +<pre class="brush: html"><canvas id="stockGraph" width="150" height="150"> current stock price: $3.15 +0.15 </canvas> @@ -56,7 +56,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Basic_usage <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'); +<pre class="brush: js">var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d'); </pre> @@ -67,7 +67,7 @@ var ctx = canvas.getContext('2d'); <p>Ранее уже упоминалось, что в браузерах, которые не поддерживают {{HTMLElement("canvas")}} отображается запасное содержимое. Но помимо этого, определить, поддерживает ли браузер <code>canvas</code>, можно прямо из кода, проверив наличие метода <code>getContext()</code>. Код с запасным содержимым, который мы приводили Выше, становится следующим:</p> -<pre class="brush: js notranslate">var canvas = document.getElementById('tutorial'); +<pre class="brush: js">var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -87,7 +87,7 @@ if (canvas.getContext){ <p><strong>Примечание:</strong> вставка скрипта внутрь HTML не является хорошей практикой. Мы делаем это здесь, чтобы сделать пример короче.</p> </div> -<pre class="notranslate"><code><!DOCTYPE html></code> +<pre><code><!DOCTYPE html></code> <html> <head> <title>Canvas tutorial</title> @@ -119,7 +119,7 @@ if (canvas.getContext){ <p>Для начала, давайте посмотрим на простой пример, который рисует два пересекающихся прямоугольника, один из которых имеет прозрачность alpha. Мы изучим, как это работает более детально в последующих примерах.</p> -<pre class="notranslate"><code><!DOCTYPE html></code> +<pre><code><!DOCTYPE html></code> <html> <head> <script type="application/javascript"> 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 4913f93bda..c30661c80e 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 @@ -41,7 +41,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <h3 id="Пример_создания_прямоугольных_фигур">Пример создания прямоугольных фигур</h3> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> @@ -49,7 +49,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js notranslate">function draw() { +<pre class="brush: js">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); @@ -113,7 +113,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <p>Например, код для рисования треугольника будет выглядеть как-то так:</p> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="100" height="100"></canvas> </body> @@ -121,7 +121,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js notranslate">function draw() { +<pre class="brush: js">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -153,7 +153,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <p>Вы можете проверить это сами, используя участок кода ниже. Просто вставьте в функцию <code>draw()</code>, рассмотренную ранее.</p> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> @@ -161,7 +161,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js;highlight:[8,10,12] notranslate">function draw() { +<pre class="brush: js;highlight:[8,10,12]">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -203,7 +203,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <p>Пример ниже рисует два треугольника, один закрашенный и другой обведён контуром.</p> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> @@ -211,7 +211,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js;highlight[9,10,16,17] notranslate">function draw() { +<pre class="brush: js;highlight[9,10,16,17]">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -270,7 +270,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </div> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="150" height="200"></canvas> </body> @@ -278,7 +278,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js;highlight[16] notranslate">function draw() { +<pre class="brush: js;highlight[16]">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -332,7 +332,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <p>В этом примере многократно используются квадратичные кривые Безье для рисования речевой выноски.</p> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> @@ -340,7 +340,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js;highlight[9,10,11,12,13,14] notranslate">function draw() { +<pre class="brush: js;highlight[9,10,11,12,13,14]">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); @@ -366,7 +366,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур <p>В этом примере нарисовано сердце с использованием кубических кривых Безье.</p> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> @@ -374,7 +374,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js;highlight[9,10,11,12,13,14] notranslate">function draw() { +<pre class="brush: js;highlight[9,10,11,12,13,14]">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -414,7 +414,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур Однако, нет никаких ограничений на количество или типы контуров, которые вы можете использовать для создания фигур. Давайте в этом примере объединим все вышеперечисленные функции контуров, чтобы создать набор очень известных игровых персонажей.</p> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> @@ -422,7 +422,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур </pre> </div> -<pre class="brush: js notranslate">function draw() { +<pre class="brush: js">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -521,7 +521,7 @@ function roundedRect(ctx, x, y, width, height, radius) { <dd>Конструктор <code><strong>Path2D()</strong></code> возвращает вновь созданный объект <code>Path2D</code> необязательно с другим путём в качестве аргумента (создаёт копию) или необязательно со строкой, состоящей из данных пути <a href="/en-US/docs/Web/SVG/Tutorial/Paths">SVG path</a> .</dd> </dl> -<pre class="brush: js notranslate">new Path2D(); // пустой path объект +<pre class="brush: js">new Path2D(); // пустой path объект new Path2D(path); // копирование из другого path new Path2D(d); // path из SVG</pre> @@ -539,7 +539,7 @@ new Path2D(d); // path из SVG</pre> <p>В этом примере мы создаём прямоугольник и круг. Оба они сохраняются как объект <code>Path2D</code>, поэтому они доступны для последующего использования. С новым API <code>Path2D</code> несколько методов были обновлены, чтобы при необходимости принять объект <code>Path2D</code> для использования вместо текущего пути. Здесь <code>stroke</code> и <code>fill</code> используются с аргументом пути, например, для рисования обоих объектов на холст.</p> <div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body onload="draw();"> <canvas id="canvas" width="130" height="100"></canvas> </body> @@ -547,7 +547,7 @@ new Path2D(d); // path из SVG</pre> </pre> </div> -<pre class="brush: js;highlight[6,9] notranslate">function draw() { +<pre class="brush: js;highlight[6,9]">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); @@ -574,6 +574,6 @@ new Path2D(d); // path из SVG</pre> <p>Путь перемещается в точку (<code>M10 10</code>), а затем горизонтально перемещается на 80 пунктов вправо (<code>h 80</code>), затем на 80 пунктов вниз (<code>v 80</code>), затем на 80 пунктов влево (<code>h -80</code>), а затем обратно на start (<code>z</code>). <br> Этот пример можно увидеть на странице <a href="/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths"><code>Path2D</code> constructor</a>.</p> -<pre class="brush: js; notranslate">var p = new Path2D("M10 10 h 80 v 80 h -80 Z");</pre> +<pre class="brush: js;">var p = new Path2D("M10 10 h 80 v 80 h -80 Z");</pre> <div>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div> 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 58707876c9..4a2738bfe5 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 @@ -31,16 +31,16 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_текста <p>Текст вставлен с использованием текущего <code>fillStyle</code>.</p> -<pre class="brush: js;highlight[4] notranslate">function draw() { +<pre class="brush: js;highlight[4]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = "48px serif"; ctx.fillText("Hello world", 10, 50); }</pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="300" height="100"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="300" height="100"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_fillText", 310, 110)}}</p> @@ -49,16 +49,16 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_текста <p>Текст вставлен с использованием текущего <code>strokeStyle</code>.</p> -<pre class="brush: js;highlight[4] notranslate">function draw() { +<pre class="brush: js;highlight[4]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = "48px serif"; ctx.strokeText("Hello world", 10, 50); }</pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="300" height="100"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="300" height="100"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_strokeText", 310, 110)}}</p> @@ -95,7 +95,7 @@ baselines, due to glyphs extending far outside the em square." src="http://www.w <p>Редактируя код ниже, вы можете видеть, как меняется отображение текста на canvas в реальном времени:</p> -<pre class="brush: js;highlight[2] notranslate">ctx.font = "48px serif"; +<pre class="brush: js;highlight[2]">ctx.font = "48px serif"; ctx.textBaseline = "hanging"; ctx.strokeText("Hello world!", 0, 100); </pre> @@ -103,7 +103,7 @@ ctx.strokeText("Hello world!", 0, 100); <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> @@ -114,7 +114,7 @@ ctx.textBaseline = "hanging"; ctx.strokeText("Hello world", 0, 100);</textarea> </pre> -<pre class="brush: js notranslate">var canvas = document.getElementById("canvas"); +<pre class="brush: js">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -153,7 +153,7 @@ window.addEventListener("load", drawCanvas); <p>Пример ниже показывает, как можно измерить ширину текста.</p> -<pre class="brush: js;highlight[3] notranslate">function draw() { +<pre class="brush: js;highlight[3]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var text = ctx.measureText("foo"); // TextMetrics object text.width; // 16; 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 5a557d2aed..a169bc0cf5 100644 --- a/files/ru/web/api/canvas_api/tutorial/transformations/index.html +++ b/files/ru/web/api/canvas_api/tutorial/transformations/index.html @@ -5,17 +5,17 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations --- <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}</div> -<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> +<div class="summary"><span>Ранее в этом уроке мы узнали о</span> <span 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>и <strong>координатном пространстве</strong> .</span> <span> До сих пор мы использовали только сетку по умолчанию и изменили размер всего холста для наших нужд.</span> При преобразованиях существуют более мощные способы изменения исходных координат в различные положение, поворот сетки и даже масштабирование.</div> -<h2 id="Saving_and_restoring_state"><span class="notranslate" style="background-color: #e6ecf9;">Сохранение и восстановление состояния</span></h2> +<h2 id="Saving_and_restoring_state"><span style="background-color: #e6ecf9;">Сохранение и восстановление состояния</span></h2> -<p><span class="notranslate">Прежде чем перейти к методам преобразования, давайте рассмотрим два других метода, которые необходимы, когда вы начинаете создавать все более сложные рисунки.</span></p> +<p><span>Прежде чем перейти к методам преобразования, давайте рассмотрим два других метода, которые необходимы, когда вы начинаете создавать все более сложные рисунки.</span></p> <dl> <dt>{{domxref("CanvasRenderingContext2D.save", "save()")}}</dt> - <dd><span class="notranslate">Сохраняет все состояние холста.</span></dd> + <dd><span>Сохраняет все состояние холста.</span></dd> <dt>{{domxref("CanvasRenderingContext2D.restore", "restore()")}}</dt> - <dd><span class="notranslate">Восстанавливает последнее сохранённое состояние холста.</span></dd> + <dd><span>Восстанавливает последнее сохранённое состояние холста.</span></dd> </dl> <p>Состояние холста сохраняется в стеке. Каждый раз, когда вызывается метод <code>save()</code>, текущее состояние отрисовки записывается в стек. Состояние отрисовки содержит:</p> @@ -32,7 +32,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <p>Здесь показано, как функционирует сохранение в стек состояния отрисовки на примере последовательной отрисовки набора прямоугольников.</p> -<pre class="brush: js; highlight:[5,10,15,18] notranslate">function draw() { +<pre class="brush: js; highlight:[5,10,15,18]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillRect(0, 0, 150, 150); // рисуем прямоугольник с настройками по умолчанию @@ -54,9 +54,9 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations }</pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>Сначала рисуется большой прямоугольник с настройками по умолчанию. Затем мы сохраняем состояние холста, после чего изменяем цвет заливки. Затем рисуем второй синий прямоугольник меньшего размера и опять сохраняем состояние. Снова изменяем какие-то настройки и рисуем третий полупрозрачный белый прямоугольник.</p> @@ -84,7 +84,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <p>Внутри функции <code>draw()</code> мы вызываем <code>fillRect()</code> девять раз, используя два цикла <code>for</code>. Каждый раз мы сохраняем состояние холста, смещаем его, рисуем прямоугольник, а затем восстанавливаем исходное состояние. Заметьте, что <code>fillRect()</code> всегда использует одни и те же параметры, а изменение позиции фигуры осуществляется с помощью <code>translate()</code>.</p> -<pre class="brush: js; highlight:[7] notranslate">function draw() { +<pre class="brush: js; highlight:[7]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i = 0; i < 3; i++) { for (var j = 0; j < 3; j++) { @@ -99,9 +99,9 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("A_translate_example", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}</p> @@ -125,7 +125,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <p><strong>Памятка</strong>: Углы измеряются в радианах, а не в градусах. Для преобразования единиц используйте следующую формулу: <code>radians = (Math.PI/180)*degrees</code>.</p> </div> -<pre class="brush: js; highlight:[9, 23] notranslate">function draw() { +<pre class="brush: js; highlight:[9, 23]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // left rectangles, rotate from canvas origin @@ -159,9 +159,9 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <p>Для поворота прямоугольника относительно его центра мы сначала смещаем начало координат, выполняем поворот, а затем выполняем обратное смещение к точке 0,0, и наконец рисуем прямоугольник.</p> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="300" height="200"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="300" height="200"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("A_rotate_example", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}</p> @@ -183,7 +183,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <p>В этом примере мы нарисуем прямоугольники, используя разные масштабные коэффициенты.</p> -<pre class="brush: js; highlight:[6,11] notranslate">function draw() { +<pre class="brush: js; highlight:[6,11]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // рисуем масштабированный прямоугольник. @@ -201,9 +201,9 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("A_scale_example", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}</p> @@ -244,7 +244,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations <h3 id="Пример_использования_transform_и_setTransform">Пример использования <code>transform</code> и <code>setTransform</code></h3> -<pre class="brush: js; highlight:[12,15] notranslate">function draw() { +<pre class="brush: js; highlight:[12,15]">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var sin = Math.sin(Math.PI / 6); @@ -265,9 +265,9 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations </pre> <div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="200" height="250"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="200" height="250"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> +<pre class="brush: js">draw();</pre> </div> <p>{{EmbedLiveSample("Пример_использования_transform_и_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}</p> |