From 980fe00a74a9ad013b945755415ace2e5429c3c2 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 27 Oct 2021 02:31:24 +0300 Subject: [RU] Remove notranslate (#2874) --- .../tutorial/advanced_animations/index.html | 30 +++---- .../tutorial/applying_styles_and_colors/index.html | 92 +++++++++++----------- .../api/canvas_api/tutorial/basic_usage/index.html | 12 +-- .../canvas_api/tutorial/drawing_shapes/index.html | 40 +++++----- .../canvas_api/tutorial/drawing_text/index.html | 20 ++--- .../canvas_api/tutorial/transformations/index.html | 40 +++++----- 6 files changed, 117 insertions(+), 117 deletions(-) (limited to 'files/ru/web/api/canvas_api') 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
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
-

В предыдущей главе мы сделали несколько базовых анимаций и узнали, как можно двигать вещи. В этой части мы более подробно рассмотрим само движение и собираемся добавить некоторую физику, чтобы сделать наши анимации более продвинутыми.

+

В предыдущей главе мы сделали несколько базовых анимаций и узнали, как можно двигать вещи. В этой части мы более подробно рассмотрим само движение и собираемся добавить некоторую физику, чтобы сделать наши анимации более продвинутыми.

-

Рисование мяча

+

Рисование мяча

-

Мы собираемся использовать шар для наших анимационных исследований, поэтому давайте сначала нарисуем этот шар на canvas. Нам нужен следующий код.

+

Мы собираемся использовать шар для наших анимационных исследований, поэтому давайте сначала нарисуем этот шар на canvas. Нам нужен следующий код.

<canvas id="canvas" width="600" height="300"></canvas>
-

Как обычно, нам нужен контекст рисования. Чтобы нарисовать шар, мы создадим объект ball, который содержит свойства и метод draw() , чтобы нарисовать его на canvas.

+

Как обычно, нам нужен контекст рисования. Чтобы нарисовать шар, мы создадим объект ball, который содержит свойства и метод draw() , чтобы нарисовать его на canvas.

var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
@@ -37,11 +37,11 @@ var ball = {
 
 ball.draw();
-

Здесь нет ничего особенного, шар на самом деле представляет собой простой круг и рисуется с помощью метода {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.

+

Здесь нет ничего особенного, шар на самом деле представляет собой простой круг и рисуется с помощью метода {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.

-

Добавление скорости

+

Добавление скорости

-

Теперь, когда у нас есть шар, мы готовы добавить базовую анимацию, как мы узнали из последней главы этого урока. Опять же, {{domxref("window.requestAnimationFrame()")}} помогает нам контролировать анимацию. Мяч перемещается, добавляя вектор скорости в положение. Для каждого кадра мы также {{domxref("CanvasRenderingContext2D.clearRect", "очищаем", "", 1)}} холст, чтобы удалить старые круги из предыдущих кадров.

+

Теперь, когда у нас есть шар, мы готовы добавить базовую анимацию, как мы узнали из последней главы этого урока. Опять же, {{domxref("window.requestAnimationFrame()")}} помогает нам контролировать анимацию. Мяч перемещается, добавляя вектор скорости в положение. Для каждого кадра мы также {{domxref("CanvasRenderingContext2D.clearRect", "очищаем", "", 1)}} холст, чтобы удалить старые круги из предыдущих кадров.

var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
@@ -82,9 +82,9 @@ canvas.addEventListener('mouseout', function(e) {
 ball.draw();
-

Границы

+

Границы

-

Без какого-либо граничного коллизионного тестирования наш мяч быстро выбегает из холста. Нам нужно проверить, не находятся ли x и y положения шара вне размеров холста и не инвертируют направление векторов скорости. Для этого мы добавим следующие проверки в метод draw :

+

Без какого-либо граничного коллизионного тестирования наш мяч быстро выбегает из холста. Нам нужно проверить, не находятся ли x и y положения шара вне размеров холста и не инвертируют направление векторов скорости. Для этого мы добавим следующие проверки в метод draw :

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;
 }
-

Первое демо

+

Первое демо

-

Посмотрим, как он выглядит в действии. Переместите мышь на холст, чтобы запустить анимацию.

+

Посмотрим, как он выглядит в действии. Переместите мышь на холст, чтобы запустить анимацию.