- PVSM.RU - https://www.pvsm.ru -
Доброго времени суток, друзья!
Данная статья представляет собой небольшую подборку примеров работы с 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')
Довольно слов.
Начнем с простых фигур.
Спасибо за потраченное время. Надеюсь, оно было потрачено не зря.
Автор: 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
Нажмите здесь для печати.