Canvas: рисование и анимация графики, введение

5 (100%) 8 vote[s]

Тег <canvas> — один из «флэш — киллеров» функций HTML5. Цикл статей с тегом <canvas> будет посвящен основным возможностям рисования на холсте HTML5. Спецификация W3C HTML5 об элементе <canvas>  гласит, что « элемент canvas предоставляет сценариям холст с растровым изображением, зависящим от разрешения , который можно использовать для визуализации графиков, игровой графики или других визуальных изображений на лету ».

Canvas (холст) был разработан для пиксельной графики , а SVG (Scalable Vector Graphics, еще один стандарт W3C) — для векторной графики.

Важно понимать, что Canvas предназначен для рисования пикселей. У него нет форм или векторов. Нет объектов для прикрепления обработчиков событий. Он просто рисует пиксели на экране. Как мы увидим далее, это и сила, и слабость.

Canvas — это API для рисования 2D. По сути, браузер предоставляет прямоугольную область на экране, в которой можно рисовать. Первоначально он был создан Apple для своих виджетов Dashboard , но с тех пор его приняли все основные разработчики браузеров, и теперь он является частью спецификации HTML 5.

HTML Canvas — это удивительная технология рисования, встроенная во все современные веб-браузеры.  С Canvas вы можете рисовать фигуры, манипулировать фотографиями, создавать игры и анимировать практически все; все с соответствующими веб-стандартами.  Вы даже можете создавать мобильные приложения с ним.

Действительно, API рисования на canvas JavaScript поддерживает различные виды фигур: линии, прямоугольники, эллипсы, дуги, кривые, текст, изображения. Необходимо указать нужные стили рисования, которые будут влиять на способ отрисовки фигур (цвет, ширина рисования, тени и т. д.). 

Также в canvas поддерживается альфа-канал для рисования в прозрачном режиме, а также многие расширенные режимы рисования и глобальные фильтры (размытие и т. д.).

Canvas также используется для анимации со скоростью 60 кадров в секунду (полезно для игр), для отображения видео со специальными эффектами, для отображения потока веб-камеры и т. д.

Трехмерное рисование с использованием API WebGL также возможно в <canvas> . Для этого чаще всего используют две популярные библиотеки для создания трехмерного рисования/анимации в <canvas> : BabylonJS  и ThreeJS .

Создаём фейерверки

Пример использования 3D библиотеки tree.js

Кликните в любом месте окна, появятся фейерверки!

Рисуем абстракции

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

Arrows with Canvas

Который час?

Пример рисования фигур (в частности, стрелок с изогнутыми наконечниками).

Все эти примеры и много других подробно рассмотрим в следующих статьях.

Spider:

Caleidoscope:

Secret Letter

С точки зрения навыков вам нужно знать только базовый JavaScript и HTML. Все, что вам нужно на вашем компьютере, это браузер Chrome или Safari и ваш любимый текстовый редактор. С Canvas очень легко работать: не требуется IDE.

Читайте больше ро теме:

Подписаться
Уведомление о
guest
3 комментариев
старее
новее большинство голосов
Inline Feedbacks
View all comments
Full-R
Full-R
13.01.2021 21:18

Прикольно. Взял у вас кусок визуализатора звука. К сожалению в JavaScript часы не будут показывать адекватное время. Таймеры и интервалы вечно врут.

Просмотры: 387

Популярные записи