recursal/MDN huggingface dataset:
Руководство по Canvas
=====================

![](/ru/docs/Web/API/Canvas_API/Tutorial/canvas_tut_examples.jpg)

**`<canvas>`** — это HTML элемент, использующийся для рисования графики средствами языков программирования (обычно это JavaScript). Он может, к примеру, использоваться для рисования графов, создания коллажей или простой анимации.
 Изображения в правой части статьи являются примерами использования `<canvas>.`
 Примеры их создания приводятся в этой статье.

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

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

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

Работа с элементом **`<canvas>`** довольно проста, но потребует от вас базовых знаний HTML и JavaScript. Следует предупредить о том, что элемент `<canvas>` не работает в некоторых старых браузерах, но поддерживается большинством современных браузеров. Стандартный размер **`<canvas>`** 300px × 150px (ширина × высота), однако эти размеры могут быть изменены при помощи HTML-атрибутов `height` и `width`. Для рисования графики **`<canvas>`** мы будем использовать `javascript context object`, который создаёт графику динамически.

В этом руководстве
------------------

* Базовое использование
* Рисование форм (en-US)
* Использование изображений (en-US)
* Применение стилей и цветов (en-US)
* Трансформации (en-US)
* Композирование и обрезка (en-US)
* Базовое анимирование (en-US)
* Оптимизация canvas (en-US)
Смотрите Также
--------------

* Canvas topic page
* Drawing Graphics with Canvas (en-US)
* Canvas examples
* HTML5 Tutorial
* Drawing Text Using a Canvas (en-US)
* Adding Text to Canvas
* Canvas Drawing and Animation Application
* Interactive canvas tutorial
* HTML5CanvasTutorials
* How to draw N grade Bézier curves with the Canvas API
* W3C Standard
Примечание для помощников
-------------------------

Из-за досадной технической ошибки, которая произошла 17 июня 2013 года, мы утеряли историю по этому руководству, в том числе атрибуции ко всем прошлым, участвовавшие в его создании. Мы приносим извинения за это, и надеемся, что вы простите нас за этот несчастный случай.

* Следующая статья »
Finale
======

* « Предыдущая статья

Поздравляем! Вы завершили Canvas tutorial! Эти знания помогут вам создавать великолепную 2d графику в сети.

Больше примеров и учебных материалов
------------------------------------

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

Codepen.io

Песочница для фронтенд разработчика и редактор кода в браузере.

Canvasdemos.com

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

HTML5CanvasTutorials

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

31 days of Canvas tutorials

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

Game development

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

Другие Web API
--------------

Эти APIs могут быть полезны в дальнейшей работе с canvas и графикой:

WebGL

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

SVG

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

Web Audio

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

Вопросы
-------

Stackoverflow

Вопросы с тегом "canvas".

Comments about this tutorial – the MDN documentation community

Если у вас остались вопросы об этом учебнике или вы хотите поблагодарить нас, не стесняйтесь обращаться к нам!

* « Предыдущая статья
DOMTokenList.replace()
======================

Метод **`replace()`** интерфейса `DOMTokenList` заменяет существующий класс на новый класс. Если первый не существует, то `replace()` сразу же возвращает `false`, без добавления нового класса в список классов.

Синтаксис
---------
```

tokenList.replace(oldToken, newToken);
```

### Параметры

`oldToken`

`DOMString` - класс, который вы хотите заменить.

`newToken`

`DOMString` класс, которым вы хотите заменить класс `oldToken`.

### Возвращает значение

Boolean, которое будет `true`, если `oldToken` был успешно заменён, или `false` в противном случае.

**Примечание:** В старых браузерах `replace()` возвращает void.

Примеры
-------

В следующем примере мы получаем список классов, установленных в элементе `<span>` как `DOMTokenList`, используя `Element.classList`. Затем мы заменяем класс в списке и записываем список в `Node.textContent`, принадлежащий `<span>`.

В HTML:


```html
<span class="a b c"></span>
```


В JavaScript:


```js
let span = document.querySelector("span");
let classes = span.classList;

let result = classes.replace("c", "z");
console.log(result);

if (result) {
  span.textContent = classes;
} else {
  span.textContent = "token not replaced successfully";
}
```


Результат выглядит так:

Полифил
-------

Следующий полифил добавит метод replace в класс `DOMTokenList`. Следующий код будет работать только с **IE10-11**. Чтобы использовать с более ранними версиями IE, обратитесь к полифилу по `element.classList#Polyfill`


```js
DOMTokenList.prototype.replace = function (a, b) {
  if (this.contains(a)) {
    this.add(b);
    this.remove(a);
    return true;
  }
  return false;
};
```

Спецификации
------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-replace① |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
StorageManager.estimate()
=========================

**Secure context:** This feature is available only in secure contexts (en-US) (HTTPS), in some or all supporting browsers.

The **`estimate()`** method of the `StorageManager` interface asks the Storage Manager to obtain quota and usage information for the current origin. This method operates asynchronously, so it returns a `Promise` which resolves once the information is available. The promise's fulfillment handler receives as an input a `StorageEstimate` (en-US) with the usage and quota data.

Синтаксис
---------
```

var estimatePromise = StorageManager.estimate();
```

### Параметры

None.

### Возвращаемый результат

A `Promise` that resolves to an object which conforms to the `StorageEstimate` (en-US) dictionary. This dictionary contains estimates of how much space is available to the origin or app (in `StorageEstimate.quota` (en-US), as well as how much is currently used (in `StorageEstimate.usage` (en-US)). These are not exact numbers; between compression, deduplication, and obfuscation for security reasons, they will not be precise.

You may find that the `quota` varies from app to app based on factors such as the frequency with which the user visits it, commonly-known site popularity data, and so forth.

Примеры
-------

In this example, we obtain the usage estimates and present the percentage of storage capacity currently used to the user.

### HTML content


```html
<p>
  You're currently using about <span id="percent"> </span>% of your available
  storage.
</p>
```

### JavaScript content


```js
navigator.storage.estimate().then(function (estimate) {
  document.getElementById("percent").innerHTML = (
    estimate.usage / estimate.quota
  ).toFixed(2);
});
```

### Результат

Спецификация
------------

| Specification |
| --- |
| Storage Standard # ref-for-dom-storagemanager-estimate |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Storage API
* `Storage`, the object returned by `Window.localStorage`
* `StorageManager`
* `navigator.storage` (en-US)
active
======

Свойство только для чтения **`active`** интерфейса `MediaStream` возвращает логическое значение, которое может быть `true`, если стрим активен; во всех остальных случаях, будет возвращён `false`. Стрим считается **активным,** если хотя бы один из `MediaStreamTrack` не находится в состоянии `MediaStreamTrack.ended`. Как только все track завершатся, свойство `active` переключится в состояние `false`.

Синтаксис
---------
```

var isActive = MediaStream.active;
```

### Значение

Логическое значение равно `true`, если стрим активен; в противном случае, возвращается `false`.

Пример
------

В этом примере, стрим ведётся с пользовательского микрофона и веб-камеры, запрошенных с помощью `getUserMedia()`. Когда стрим становится активным (а это тогда, когда выполнен `Promise`, кнопка на странице обновляется, опираясь на состояние стрима, активен он или же нет.


```js
var promise = navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true
});

promise.then(function(stream) {
  var startBtn = document.querySelector('#startBtn');
  startBtn.disabled = stream.active;
};)
```

Спецификации
------------

| Specification |
| --- |
| Media Capture and Streams # dom-mediastream-active |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
console: статический метод group()
==================================

Статический метод **`console.group()`** создаёт новую группу сообщений в выводе веб-консоли. После вызова последующие сообщения, выводимые в консоль, будут иметь дополнительный отступ, до тех пор пока не будет вызван метод `console.groupEnd()` (en-US).

**Примечание:** Эта возможность доступна в Web Workers

Синтаксис
---------


```js
group()
group(label)
```

Параметры
---------

`label` Необязательный

Заголовок группы.

### Возвращаемое значение

Нет (`undefined`).

Примеры
-------

Использование групп помогает упорядочить вывод в консоль благодаря визуальной компоновке связанных сообщений. Чтобы создать новый блок нужно вызвать `console.group()`. Метод `console.groupCollapsed()` работает аналогичным образом, но выведенная группа будет свёрнута до тех пор, пока не будет развёрнута по клику.

Чтобы прекратить вывод в группу, требуется вызвать `console.groupEnd()`. Например, следующий код:


```js
console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.log("Back to the outer level");
```


выведет следующий результат:

![Скриншот вложенных сообщений в консоли.](/ru/docs/Web/API/console/group_static/nesting.png)

Для дополнительной информации смотрите Использование групп в консоли в документации `console`.

Спецификация
------------

| Specification |
| --- |
| Console Standard # group |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `console.groupEnd()` (en-US)
* `console.groupCollapsed()` (en-US)
* Документация Microsoft Edge: `console.group()`
* Документация Node.JS: `console.group()`
* Документация Google Chrome: `console.group()`
Console.timeEnd
===============

Останавливает таймер, который был запущен до этого через функцию `console.time()`.

Более подробная документация и примеры есть в разделе Таймеры (en-US) документации к `console`.

**Примечание:** Эта возможность доступна в Web Workers

Синтаксис
---------


```js
console.timeEnd(label);
```

### Параметры

`label`

Метка таймера, который будет остановлен. Останавливается один раз. После остановки время отображается в Веб-консоли.

Примеры
-------


```js
console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff...");
console.timeEnd("answer time");
```


В примере выше мы получим время, которое потребовалось пользователю, чтобы закрыть первое диалоговое окно, а затем время, которое потребовалось пользователю, чтобы закрыть второе диалоговое окно:

![timerresult.png](/ru/docs/Web/API/console/timeend_static/timer_output.png)

Обратите внимание, что метка таймера отображается как при вызове `timeLog()`, так и завершении таймера. Кроме того, вызов timeEnd() выводит дополнительную информацию "timer ended", чтобы очевидно показать, что таймер больше не отслеживается.

Спецификации
------------

| Specification |
| --- |
| Console Standard # timeend |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `Console.time`
* Opera Dragonfly documentation: Console
console.error()
===============

Выводит сообщение об ошибке в веб-консоль.

**Примечание:** Эта возможность доступна в Web Workers

Синтаксис
---------
```

console.error(obj1 [, obj2, ..., objN]);
console.error(msg [, subst1, ..., substN]);
console.exception(obj1 [, obj2, ..., objN]);
console.exception(msg [, subst1, ..., substN]);
```


**Примечание:** `console.exception()` — это псевдоним для `console.error()`; они функционально идентичны.

### Параметры

`obj1` ... `objN`

Список объектов JavaScript для вывода. Строковое представление каждого из этих объектов объединяются в указанном порядке и выводятся.

`msg`

Строка JavaScript, содержащая 0 или более подстановочных символов для замены.

`subst1` ... `substN`

Объекты JavaScript, с помощью которых произойдёт замена символов в msg. Это предоставляет дополнительный контроль над форматом вывода.

Смотрите раздел Вывод текста в консоль в документации `console` для подробностей.

Спецификация
------------

| Specification |
| --- |
| Console Standard # error |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Opera Dragonfly documentation: Console
* MSDN: Using the F12 Tools Console to View Errors and Status
* Chrome Developer Tools: Using the Console
clear()
=======

**Не стандартно:** Эта возможность не является стандартной и стандартизировать её пока никто не собирается. Не используйте её на сайтах, смотрящих во внешний мир: она будет работать не у всех пользователей. Также могут присутствовать большие несовместимости между реализациями и её поведение может в будущем измениться.

Очищает консоль.

Содержимое консоли заменяется на информационное сообщение, которое может быть следующим: "Консоль очищена".

Примечание для Google Chrome, от функции `console.clear()` не будет никакого эффекта, если у пользователя установлена надстройка "Preserve log upon navigation" в настройках.

Синтаксис
---------
```

console.clear();
```

Спецификация
------------

| Specification |
| --- |
| Console Standard # clear |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Opera Dragonfly documentation: Console
* MSDN: Using the F12 Tools Console to View Errors and Status
* Chrome Developer Tools: Using the Console
Console.profile()
=================

**Не стандартно:** Эта возможность не является стандартной и стандартизировать её пока никто не собирается. Не используйте её на сайтах, смотрящих во внешний мир: она будет работать не у всех пользователей. Также могут присутствовать большие несовместимости между реализациями и её поведение может в будущем измениться.

Запускает профайлер, встроенный в браузер (например, Firefox performance tool).

Вы можете указать аргумент, чтобы назвать профиль, это позволит вам остановить только этот профиль, если записывается несколько профилей. Смотрите `Console.profileEnd()` (en-US) чтобы понять, как этот аргумент интерпретируется.

Останавливает профайлер `Console.profileEnd()` (en-US).

**Примечание:** Эта возможность доступна в Web Workers

Синтаксис
---------
```

console.profile(profileName);
```

Параметры
---------

`profileName`

Вы можете указать метку профиля (по желанию).

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `Console.profileEnd()` (en-US)
Console.trace()
===============

Выводит стэк трэйс в Веб Консоль.

**Примечание:** Эта возможность доступна в Web Workers

Посмотрите Стэк трэйсы в документации `console` с деталями и примерами.

Синтаксис
---------
```

console.trace();
```

Пример
------


```js
function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();
```


В консоли следующий трэйс будет отображён так:
```

bar
foo
<anonymous>
```

Спецификация
------------

| Specification |
| --- |
| Console Standard # trace |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Документация Opera Dragonfly: Консоль
Console.debug()
===============

Выводит сообщение в веб.консоль Сообщение отображается только если консоль настроена на показ сообщений уровня отладки.

**Примечание:** Эта возможность доступна в Web Workers

Синтаксис
---------
```

console.debug(obj1 [, obj2, ..., objN]);
console.debug(msg [, subst1, ..., substN]);
```

### Параметры

`obj1` ... `objN`

Список объектов JavaScript для вывода. Строковые представления каждого из этих объектов соединяются вместе в указанном порядке и выводятся.

`msg`

Строка JavaScript, содержащая 0 и более подстановочных символов для замены (см. `subst1` ... `substN`).

`subst1` ... `substN`

JavaScript-объекты, с помощью которых произойдёт замена подстановочных символов в `msg`. Это даст вам дополнительный контроль над форматом вывода. (см. Преобразование строк с использованием масок).

Читайте Вывод текста в консоль в документации `console` для получения дополнительной информации.

Спецификации
------------

| Specification |
| --- |
| Console Standard # debug |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Console.timeLog()
=================

Выводит в консоль текущее значение таймера, запущенного вызовом `console.time()`.
Подробности и примеры смотрите в документации Timers.

**Примечание:** Эта возможность доступна в Web Workers

Синтаксис
---------
```

console.timeLog(label);
```

### Параметры

`label`

Имя таймера для вывода в консоль.

### Результат

Если параметр `label` опущен, выводит значение таймера по умолчанию:
```

default: 1042ms
```


Если в параметре `label` указано имя существующего таймера:
```

timer name: 1242ms
```

### Исключения

При отсутствии запущенного таймера по умолчанию `timeLog()` выводит предупреждение:
```

Timer “default” doesn’t exist.
```


При указании имени несуществующего таймера:
```

 Timer “timer name” doesn’t exist.
```

Примеры
-------


```js
console.time("answer time");
alert("Нажмите для продолжения");
console.timeLog("answer time");
alert("Делаем кучу другой работы...");
console.timeEnd("answer time");
```


Отчёт таймера начинается с момента вызова `console.time()`. Сначала выводится время от начала отсчёта до закрытия первого уведомления. Затем выводится время с начала отсчёта до закрытия второго уведомления:

![timerresult.png](/ru/docs/Web/API/console/timelog_static/console-timelog.png)

Обратите внимание, имя таймера печатается как при вызовах `timeLog()` , так и при завершении таймера.

Спецификации
------------

| Specification |
| --- |
| Console Standard # timelog |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Opera Dragonfly documentation: Console
Console.count()
===============

Выводит число, равное тому, сколько раз была вызвана конкретная функция `count()`. Эта функция также принимает необязательный аргумент `label`.
**Примечание:** Эта возможность доступна в Web Workers

Если `label` передаётся в функцию, то она выводит число вызовов функции `count()` с такой же точно `label`.

Если `label` опущена, то функция выводит такое число, сколько раз была вызвана функция `count()` в этой отдельной строке.

Например, при таком коде:


```js
var user = "";

function greet() {
  console.count();
  return "hi " + user;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count();
```


В консоль выведется:
```

"<no label>: 1"
"<no label>: 2"
"<no label>: 3"
"<no label>: 1"
```


Обратите внимание на итоговую строку вывода журнала: отдельный вызов count () в строке 11 рассматривается как независимое событие.

Если мы передадим переменную `user` в качестве аргумента `label` при первом вызове функции `count()`, и строку "alice" при втором:


```js
var user = "";

function greet() {
  console.count(user);
  return "hi " + user;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count("alice");
```


На выходе мы увидим:
```

"bob: 1"
"alice: 1"
"alice: 2"
"alice: 3"
```


Таким образом мы сохранили различные счётчики основываясь только на значении `label`. Поскольку строка "alice" в строке 11 совпала со значением `user` дважды, это не сочлось отдельным событием.

Синтаксис
---------
```

console.count([label]);
```

Параметры
---------

`label`

Строка. Если она передаётся, `count()` выводит такое число, которое соответствует количеству раз вызова данной функции с таким же точно `label`.

Спецификации
------------

| Specification |
| --- |
| Console Standard # count |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Console.info()
==============

Выводит сообщения, содержащие некоторую информацию, в Веб-консоль. В Firefox и Chrome, рядом с этими элементами в консоли отображается маленькая иконка "i".

**Примечание:** Эта возможность доступна в Web Workers

Синтаксис
---------
```

console.info(obj1 [, obj2, ..., objN]);
console.info(msg [, subst1, ..., substN]);
```

Параметры
---------

`obj1` ... `objN`

Список объектов JavaScript, для вывода. Строковое представление каждого из них добавляется в указанном порядке вывода.

`msg`

Строка, содержащая 0 или более масок для замены.

`subst1` ... `substN`

Объекты JavaScript, которыми заменятся маски в строке `msg`. Так можно дополнительно контролировать формат вывода. Например, `console.info('Output %f', 234);` выведет в консоль: `Output 234.000000`

Смотрите Вывод текста в консоль в документации `console` для получения подробностей.

Спецификации
------------

| Specification |
| --- |
| Console Standard # info |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Opera Dragonfly documentation: Console
* MSDN: Using the F12 Tools Console to View Errors and Status