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


Якщо ви вивчаєте веб зовсім недавно, але вже встигли побачити різні красиві ефекти на сайті, по типу системи частинок або будь-які ігри розроблені на canvas'e і вас це зацікавило, але вивчати щось нове дуже страшно, то я вам готовий продемонструвати, як за 50 рядків js коду можна зробити щось цікаве на canvas'e.

Скажу відразу, я хочу пояснити логіку роботи з canvas'ом. Код дуже простий, я сподіваюся, це підштовхне вас до вивчення такого інструментарію як canvas. А так же це дуже хороша практика для початківця JS програміста.

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

Що нам потрібно зробити?
Отримати canvas і його 2D контекст (Якщо ви раніше не робили подібного, то не переживайте, це робить 2-мя рядками коду)

Зробимо наш кинувся трохи адаптивним
Задамо потрібні нам змінні і властивості
Отрісовка елемента на canvas'e
При ресайз міняємо розмір кинувся

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

Налаштування потрібних нам властивостей (товщина пера, колір заливки, колір лінії і інші властивості)
малюємо елемент
Якщо ми робимо щось динамічне. Наприклад, гру, анімацію, систему частинок і інші елементи, то створюємо цикл і в нього закидаємо рендер (отрисовку) наших об'єктів

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

1. Як я і говорив, дві строчки коду і ми можемо маніпулювати полотном

Отримати елемент по Id це стандартний API браузера, а ось getContext це метод самого canvas'a. Можна отримати і 3D контекст, але в даний момент він нам не потрібен.

2. Другий пункт, третій і п'ятий я об'єднаю тому йде оголошення змінних + код тут однаковий. Можна навіть зробити окрему функцію тому вже йде дублювання коду, а це погано.

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

Нам буде потрібно ще об'єкт options. У ньому ми будемо зберігати всі налаштування.

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

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

divisionSpeed ​​- це змінна за допомогою якої ми зможемо регулювати швидкість зміни кольору

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

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

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

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

Нам залишається тільки викликати функцію Init в будь-якому місці нашої програми.