Элементарный Canvas

Если вы изучаете веб совсем недавно, но уже успели увидеть различные красивые эффекты на сайте, по типу системы частиц или какие либо игры разработанные на canvas’e и вас это заинтриговало, но изучать что-то новое очень страшно, то я вам готов продемонстрировать, как за 50 строк js кода можно сделать что-то интересное на canvas’e.

5889821eca00e68023093cc81ad67870

Скажу сразу, я хочу объяснить логику работы с canvas’ом. Код очень простой, я надеюсь, это подтолкнет вас к изучению такого инструментария как canvas. А так же это очень хорошая практика для начинающего JS программиста.

Перейдем к коду. Напишем простую генерацию квадратов разного цвета на полотне. Код вы можете увидеть сразу весь, далее я объясню его.

Что нам нужно сделать?
Получить canvas и его 2D контекст (Если вы раньше не делали подобного, то не переживайте, это делает 2-мя строчками кода)

  1. Сделаем наш канвас немного адаптивным
  2. Зададим нужные нам переменные и свойства
  3. Отрисовка элемента на canvas’e
  4. При ресайзе меняем размер канваса

Работу в canvas можно разделить на 3 этапа.

  1. Настройка нужных нам свойств (толщина пера, цвет заливки, цвет линии и прочие свойства)
  2. Рисуем элемент
  3. Если мы делаем что-то динамическое. Например, игру, анимацию, систему частиц и прочие элементы, то создаем цикл и в него закидываем рендер (отрисовку) наших объектов

Ну хорошо, вернемся к нашему коду.

1. Как я и говорил, две строчки кода и мы можем манипулировать полотном

mnfncml8ykboa6pv3ppgspss7ma

Получить элемент по Id это стандартный API браузера, а вот getContext это метод самого canvas’a. Можно получить и 3D контекст, но в данный момент он нам не нужен.

2. Второй пункт, третий и пятый я объединю т.к. идет объявление переменных + код здесь одинаковый. Можно даже сделать отдельную функцию т.к. уже идет дублирование кода, а это плохо.

rvnjrhmegl81xz_kchg1ovmfatm

Переменные width и height нам потребуются дальше.Также не забудьте вызвать функцию ReSize после получения контекста canvas’а.

Нам потребуется еще объект options. В нем мы будем хранить все настройки.

opacity — скорость с которой наши элементы будут затираться на canvas’e
count — количество кубов, которые мы будем создавать за один прогон функции
fps — думаю объяснять не нужно для чего… правда работает странно…
color — здесь лежит маска, которая представляет нашу цветовую палитру
hue — это цветовой тон в диапазоне от 0 до 360. На картинку будет понятней

e4523fb00ddd87106b7896a317efb616

divisionSpeed — это переменная с помощью которой мы сможем регулировать скорость смены цвета

ej-cgn09ixl5s_5nw52hpz7el9a

4. Нам остается лишь создать цикл, функцию для отрисовки и вызвать всё это.

Создаем функцию Init, она нужна для инициализации цикла. У window есть отличный метод requestAniimationFrame() который позволяет зациклить вызов нужной нам функции. Так же внутри Init мы вызываем функцию Step() в которой и хранится код отрисовки наших кубиков.

Отрисовку мы будем делать в цикле, чтобы отрисовывать сразу 100 элементов. Внутри цикла, первым же делом мы ставим условие, которое позволяет нам выбрать цветовой тон в диапазоне от 0 до 360, тем самым цвета наших кубиков будут меняться. Две последующие строчки можно объединить в одну, тем самым напрямую задать цвет заливки фигуры. ctx.fillStyle позволяет задать цвет заливки, а ctx.fillRect(точка x, точка y, ширина, высота) позволяет нарисовать фигуру. Задаем рандомную высоту с шириной, но в диапазоне наших размеров.

Две строчки после цикла, это для очистки экрана. Вы уже знаете, что fillstyle позволяет задать цвет заливки, мы задаем белый цвет с прозрачностью равной opacity из объекта options. А так же запускаем отрисовку очищающей фигуры из точки 0:0 с размерами равными размерам нашего canvas’a.

Нам остается только вызвать функцию Init в любом месте нашей программы.

Реклама

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход /  Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход /  Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход /  Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход /  Изменить )

Connecting to %s