From 55ddd4454665a3c66e3d5b186bc79048468d36e7 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 15 Mar 2021 14:29:50 +0300 Subject: Auto fixes --- files/ru/web/api/canvas_api/a_basic_ray-caster/index.html | 4 ++-- files/ru/web/api/canvas_api/index.html | 2 +- .../ru/web/api/canvas_api/tutorial/advanced_animations/index.html | 2 +- .../api/canvas_api/tutorial/applying_styles_and_colors/index.html | 2 +- files/ru/web/api/canvas_api/tutorial/basic_animations/index.html | 2 +- files/ru/web/api/canvas_api/tutorial/basic_usage/index.html | 2 +- files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html | 2 +- files/ru/web/api/canvas_api/tutorial/drawing_text/index.html | 2 +- files/ru/web/api/canvas_api/tutorial/finale/index.html | 8 ++++---- files/ru/web/api/canvas_api/tutorial/index.html | 2 +- files/ru/web/api/canvas_api/tutorial/transformations/index.html | 6 +++--- files/ru/web/api/canvas_api/tutorial/using_images/index.html | 4 ++-- 12 files changed, 19 insertions(+), 19 deletions(-) (limited to 'files/ru/web/api/canvas_api') diff --git a/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html b/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html index 72b21d9f5b..4f0922351f 100644 --- a/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html +++ b/files/ru/web/api/canvas_api/a_basic_ray-caster/index.html @@ -21,13 +21,13 @@ translation_of: Web/API/Canvas_API/A_basic_ray-caster

Основная идея заключается в использовании {{domxref("window.setInterval","setInterval()")}} с некоторой произвольной задержкой, соответствующей требуемой частоте кадров. После каждого интервала функция обновления будет перерисовывать холст, и отображать текущий вид. Я знаю, что мог бы начать с более простого примера, но я уверен, что руководство canvas доберется до этого, и я хотел посмотреть, смогу ли я это сделать.

-

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

+

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

Код, который я получил, - это смесь глав raycaster из старой книги Андре Ламотетрикса о гуру программирования игр (ISBN: 0672305070) и  java raycaster, которую я нашел в интернете, отфильтровал, переименовал, и внес все изменения, которые нужно было внести, чтобы все работало хорошо.

Результаты

-

Холст в Safari 2.0.1 выполнен на удивление хорошо. С коэффициентом блочности, увеличенным до отображения кусочка шириной 8 пикселей, я могу запустить окно 320 x 240 при 24 fps на моем Apple mini. Firefox 1.5 Beta 1 еще быстрее; я могу запускать 320 x 240 при 24 fps с 4 пиксельным кусочком. Не совсем новый член семейства програмного обеспечения ID, но довольно приличный, учитывая, что это полностью интерпретируемая среда, и мне не нужно было беспокоиться о выделении памяти или видеорежимах или кодировании внутренних процедур в ассемблере или чем-то еще. Код получился очень эффективным, он использует поиск по массиву предварительно вычисленных значений, но я не гуру оптимизации, поэтому все, вероятно, можно было бы написать быстрее.

+

Холст в Safari 2.0.1 выполнен на удивление хорошо. С коэффициентом блочности, увеличенным до отображения кусочка шириной 8 пикселей, я могу запустить окно 320 x 240 при 24 fps на моем Apple mini. Firefox 1.5 Beta 1 еще быстрее; я могу запускать 320 x 240 при 24 fps с 4 пиксельным кусочком. Не совсем новый член семейства программного обеспечения ID, но довольно приличный, учитывая, что это полностью интерпретируемая среда, и мне не нужно было беспокоиться о выделении памяти или видеорежимах или кодировании внутренних процедур в ассемблере или чем-то еще. Код получился очень эффективным, он использует поиск по массиву предварительно вычисленных значений, но я не гуру оптимизации, поэтому все, вероятно, можно было бы написать быстрее.

Кроме того, он оставляет желать лучшего с точки зрения попыток быть игровым движком—нет текстур стен, нет спрайтов, нет дверей, даже нет телепортов, чтобы добраться до другого уровня. Но я уверен, что все эти вещи могут быть добавлены, через некоторое время. Canvas API поддерживает пиксельное копирование изображений, поэтому текстуры могут быть добавлены. Я оставлю это для другой статьи, возможно, от другого человека. =)

diff --git a/files/ru/web/api/canvas_api/index.html b/files/ru/web/api/canvas_api/index.html index e3986f8d75..ed0cd51081 100644 --- a/files/ru/web/api/canvas_api/index.html +++ b/files/ru/web/api/canvas_api/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/Canvas_API

Приложения от Mozilla поддерживают <canvas> начиная с Gecko 1.8 (т.е. с Firefox 1.5). Этот элемент первоначально был представлен Apple для OS X Dashboard и Safari. Internet Explorer поддерживает <canvas> начиная с 9 версии; для более ранних версий IE поддержку для <canvas> можно добавить с помощью скрипта из проекта Google's Explorer Canvas. Google Chrome и Opera 9 также поддерживают <canvas>.

-

Элемент <canvas> также используется технологией WebGL для отрисовки аппаратно-ускоренной 3D-графики на вебстраницах.

+

Элемент <canvas> также используется технологией WebGL для отрисовки аппаратно-ускоренной 3D-графики на веб-страницах.

Пример

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();

Ускорение

-

Чтобы сделать движение более реальным, вы можете играть со скоростью, нпример так:

+

Чтобы сделать движение более реальным, вы можете играть со скоростью, например так:

ball.vy *= .99;
 ball.vy += .25;
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)"; -

Функция rgba() похожа на функцию rgb(), но имеет один дополнительный параметр. Последний параметр устанавливает значение прозрачности для конкретного цвета. Действующий диапозон значений находится между 0.0 (полная прозрачность) и 1.0 (полная непрозрачность).

+

Функция rgba() похожа на функцию rgb(), но имеет один дополнительный параметр. Последний параметр устанавливает значение прозрачности для конкретного цвета. Действующий диапазон значений находится между 0.0 (полная прозрачность) и 1.0 (полная непрозрачность).

Пример globalAlpha

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/Основы_анимации
Сообщает браузеру, что вы хотите выполнить анимацию, и запрашивает, чтобы браузер вызвал указанную функцию callback для обновления анимации перед следующей перерисовкой.
-

Если вы не планируете никакого взаимодействия с пользователем, вы можете использовать функцию setInterval() , которая многократно выполняет, предоставленный ей код. Если же вы планиуете создать игру, в которой контроль анимации осуществляется мышью или клавиатурой, то необходимо использовать  setTimeout(). Установив {{domxref("EventListener")}}, вы можете перехватываете любые действия пользователя и запустить соответствующие функции анимации.

+

Если вы не планируете никакого взаимодействия с пользователем, вы можете использовать функцию setInterval() , которая многократно выполняет, предоставленный ей код. Если же вы планируете создать игру, в которой контроль анимации осуществляется мышью или клавиатурой, то необходимо использовать  setTimeout(). Установив {{domxref("EventListener")}}, вы можете перехватываете любые действия пользователя и запустить соответствующие функции анимации.

В примерах ниже мы будем использовать функцию {{domxref("window.requestAnimationFrame()")}} для контроля анимации. Функция requestAnimationFrame является более эффективной для создания анимации, так как новая итерация вызывается, когда система готова к отрисовке нового кадра. Количество вызовов в секунду примерно равно 60 и уменьшается, когда вкладка неактивна. Для более подробного изучения цикла анимации, особенно для игр, прочитайте статью Анатомия видеоигр В Зоне разработке игр.

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

Элемент {{HTMLElement("canvas")}} в документе создается с фиксированным размером элемента для рисования, который может иметь один или несколько контекстов для рендеринга, создавая и манипулируя содержимым для показа. В данном руководстве мы сфокусируемся на 2D рендеринге. Другие контексты могут предоставлять разные типы рендеринга, к примеру WebGl использует 3D контекст основанный на OpenGL ES.

-

Холст изначально пустой и прозрачный. Первым делом скрипт получает доступ к контексту и отрисовывает его. Элемент {{HTMLElement("canvas")}} имеет метод getContext(), используется для получения контекста визуализации и ее функции рисования. getContext() принимает один параметр, тип контекста. Для 2D графики, которая охвачена этим руководством будем использвать метку "2d".

+

Холст изначально пустой и прозрачный. Первым делом скрипт получает доступ к контексту и отрисовывает его. Элемент {{HTMLElement("canvas")}} имеет метод getContext(), используется для получения контекста визуализации и ее функции рисования. getContext() принимает один параметр, тип контекста. Для 2D графики, которая охвачена этим руководством будем использовать метку "2d".

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/Рисование_фигур
 
 
{{EmbedLiveSample("Передвижение_пера", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}

 
-
Если вы захотите увидеть соединные линии, то можете удалить вызов moveTo().

+
Если вы захотите увидеть соединение линии, то можете удалить вызов moveTo().

 
 

 
Note: Подробнее о функции arc(),посмотрите {{anch("Дуги")}} .

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
 
 
Больше примеров и учебных материалов

 
-
Различные демки и дополнительные разъяснеия о canvas расположены на этих сайтах:

+
Различные демки и дополнительные разъяснения о canvas расположены на этих сайтах:

 
 

  
Codepen.io

@@ -19,11 +19,11 @@ translation_of: Web/API/Canvas_API/Tutorial/Finale
  
Canvasdemos.com

  
Приложения, игры, инструменты и учебные пособия для HTML5 canvas элементов.

  
HTML5CanvasTutorials

- 
Примеры для большинтсва canvas APIs.

+ 
Примеры для большинства canvas APIs.

  
31 days of Canvas tutorials

  
Прекрасное введение в разработку графики на JavaScript.

  
Game development

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

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

 

 
 
Другие Web API

@@ -34,7 +34,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Finale
  
WebGL

  
API для отображения интерактивной 3D графики.

  
SVG

- 
Масштабируемая Векторная Графика (Scalable Vector Graphics) позволяет описывать картинки в виде набора векторов (линий) и  форм, позволяюших плавно изменять размер вне зависимости от размера в котором они нарисованы.

+ 
Масштабируемая Векторная Графика (Scalable Vector Graphics) позволяет описывать картинки в виде набора векторов (линий) и  форм, позволяющих плавно изменять размер вне зависимости от размера в котором они нарисованы.

  
Web Audio

  
Web Audio API представляет мощную и универсальную систему контроля аудио в сети, позволяющая разработчикам получить аудио ресурсы, добавлять эффекты аудио, создавать аудио визуализацию,  применять пространственные эффекты (такие как сдвиг) и многое другое.

 
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
 
 
В этом руководстве описываются основы использования элемента <canvas> для рисования 2D-графики. Приведенные примеры дадут вам понимание того, что вы можете сделать с помощью <canvas>, а использованные в статье фрагменты кода помогут в создании собственных проектов.

 
-
Впервые <canvas> использовался компанией Apple для создания Mac OS X Dashboard, а затем был реализован в Web-браузерах. На сегодняшний день все основные браузеры поддерживют работу с <canvas>. Тег <canvas> часть спецификации WhatWG Web applications 1.0 также известной как HTML5.

+
Впервые <canvas> использовался компанией Apple для создания Mac OS X Dashboard, а затем был реализован в Web-браузерах. На сегодняшний день все основные браузеры поддерживают работу с <canvas>. Тег <canvas> часть спецификации WhatWG Web applications 1.0 также известной как HTML5.

 
 
Прежде чем начать

 
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
 
 
Сначала рисуется большой прямоугольник с настройками по умолчанию. Затем мы сохраняем состояние холста, после чего изменяем цвет заливки. Затем рисуем второй синий прямоугольник меньшего размера и опять сохраняем состояние. Снова изменяем какие-то настройки и рисуем третий полупрозрачный белый прямоугольник.

 
-
До сих пор наши действия ничем не отличались от тех, что мы делали в предыдущем разделе. Однако, как только мы сделали первый вызов restore(), последнее сохранённое состояние отрисовки было восстановлено из стека, вернув все сохранённые настройки. Если бы мы не сохранили предыдущее состояние, используя save(), нам бы пришлось менять цвет заливки и настройки прозрачности вручную для возврата к предыдущему состоянию. Для каких-нибудь двух простых свойств это, может быть, сделать не так сложно. Но если таких своиств гораздо больше, это чревато очень быстрым разрастанием кода.

+
До сих пор наши действия ничем не отличались от тех, что мы делали в предыдущем разделе. Однако, как только мы сделали первый вызов restore(), последнее сохранённое состояние отрисовки было восстановлено из стека, вернув все сохранённые настройки. Если бы мы не сохранили предыдущее состояние, используя save(), нам бы пришлось менять цвет заливки и настройки прозрачности вручную для возврата к предыдущему состоянию. Для каких-нибудь двух простых свойств это, может быть, сделать не так сложно. Но если таких свойств гораздо больше, это чревато очень быстрым разрастанием кода.

 
-
Когда второй вызов restore() сделан, изначальное состояние (то самое, которое было сделано перед первым вызовом save) восстанавливается и последний нарисованный прямоугольник внось становится чёрным.

+
Когда второй вызов restore() сделан, изначальное состояние (то самое, которое было сделано перед первым вызовом save) восстанавливается и последний нарисованный прямоугольник вновь становится чёрным.

 
 
{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}

 
 
Трансляция (смещение)

 
-
Первый метод для трасформирования холста translate(). Он используется для перемещения холста в любую точку нашей сетки.

+
Первый метод для трансформирования холста translate(). Он используется для перемещения холста в любую точку нашей сетки.

 
 

  
{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}

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
 
 
Одним из преимуществ data URLs  это то что полученное изображение доступно сразу без других запросов туда-обратно на сервер. Другое потенциальное преимущество в том, что также можно инкапсулировать всё в одном файле все ваши CSS, JavaScript, HTML, и изображения, что делает его более портативным в других местах.

 
-
Некоторые недостатки этого метода в том что ваше изображение не кешировано, и для изображений с большим размером кодированние url может стать очень долгим процессом.

+
Некоторые недостатки этого метода в том что ваше изображение не кешировано, и для изображений с большим размером кодирование url может стать очень долгим процессом.

 
 
Использование кадров из видео

 
@@ -243,7 +243,7 @@ img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAs
 
 
Пример галереи искусства

 
-
В последнем примере этой главы, мы построим небольшую галлерею искусств. Галерея состоит из таблицы, включающей несколько изображений. Когда страница загрузится,  {{HTMLElement("canvas")}}  элемент вставится в каждое изображение, а вокруг будет нарисована рамка. 

+
В последнем примере этой главы, мы построим небольшую галерею искусств. Галерея состоит из таблицы, включающей несколько изображений. Когда страница загрузится,  {{HTMLElement("canvas")}}  элемент вставится в каждое изображение, а вокруг будет нарисована рамка. 

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

 
-- 
cgit v1.2.3-54-g00ecf