- PVSM.RU - https://www.pvsm.ru -

Памятка по работе с Canvas API

Памятка по работе с Canvas API - 1

Доброго времени суток, друзья!

Данная статья представляет собой небольшую подборку примеров работы с Canvas API, к которой удобно обращаться при необходимости вспомнить изученный материал.

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

Для меня это также своего рода промежуточный итог в изучении холста.

Код разбит на отдельные блоки-песочницы, которые для удобства чтения помещены под «кат».

Парочка важных моментов.

Ширину и высоту холста лучше определять с помощью атрибутов:

<canvas width="300" height="300"></canvas>

Если мы хотим, чтобы холстом была вся область просмотра, то делаем следующее:

const width = canvas.width = innerWidth
const height = canvas.height = innerHeight

Холст и двумерный контекст рисования я определяю следующим образом:

const canvas = document.querySelector('canvas')
// не путать с объектом jQuery
const $ = canvas.getContext('2d')

Довольно слов.

Начнем с простых фигур.


Линия:


Прямоугольник (квадрат):


Треугольник:


Круг:

Памятка по работе с Canvas API - 2


Кривые Безье:

Памятка по работе с Canvas API - 3


Квадратичные кривые:

Памятка по работе с Canvas API - 4


Кубические кривые:


Проведем несколько экспериментов.


Цвет линий:


Цвет заливки:


Прозрачность (альфа-канал):


Прозрачность (RGBA):


Двигаемся дальше.


Текст:


Метрики текста (шрифта):


Градиент:


Изображение:


Узор (шаблон):


Реализуем несколько функций.


Функция рисования многоугольников:


Функция рисования снежинок:


Функция переноса текста:

Автор: Омар Хайям.


Функция получения координат курсора:


Двигаемся дальше.


Определяем цвета изображения:

Подходящее (по цветам и размеру) изображение находится здесь: harryheman.github.io/art.jpg [1].


Рисуем значок загрузки:


Реализуем слежение за курсором:


Создаем интерактивный текст:


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

Спасибо за потраченное время. Надеюсь, оно было потрачено не зря.

Автор: Harry Heman

Источник [6]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/352894

Ссылки в тексте:

[1] harryheman.github.io/art.jpg: https://harryheman.github.io/art.jpg

[2] Реализуем визуальный эффект из фильма «Матрица»: https://habr.com/ru/post/485404/

[3] Пишем Pixel Art Maker на JavaScript: https://habr.com/ru/post/495772/

[4] Работаем с аудио: прогресс и визуализация данных: https://habr.com/ru/post/487574/

[5] Любовь + холст = сердце: https://habr.com/ru/post/488284/

[6] Источник: https://habr.com/ru/post/500530/?utm_source=habrahabr&utm_medium=rss&utm_campaign=500530