Создаем простую панель для рисования 3D | RUDEBOXСегодня мы собираемся вернуться к практическим занятиям по HTML5. Я думаю, что мы уже сделали хороший перерыв в наших уроках. В этом уроке я покажу вам, как создать панель для рисования которая вращается вокруг своей оси (на объекте холста HTML5). Каждый из ваших нарисованных фигур будет вращаться в псевдо 3D режиме. Для этого нам необходимо определить два объекта: точки и формы (каждая фигура состоит из нескольких пунктов). Основная идея — проектировать и вращать точки фигур, а также нарисовать кривую линию между этими точками.

Такую реализацию можно не много где применить, но основная идея состоит в том, чтобы показать вам некоторые возможности псевдо 3D. И так, приступим.

Шаг 1. HTML

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

Создаем простую панель для рисования 3D | RUDEBOX

Шаг 2. JS

Как обычно, в начале каждого JS кода, мы можем определить несколько глобальных переменных:

JS / main.js

Теперь мы можешь высчитать и указать первый уровень-точки:

Для «Роint» объекта у нас есть целый набор внутренних свойств и только две функции: проект и вращение. «Shape» являются более сложным объектом:

Она имеет меньше параметров, но больше функций (AddPoint, вращать и рисовать). Теперь мы можем приступить к добавлению нескольких основных функций сцены: главную сцену (canvas), инициализация (sceneInit), функция визуализации (DrawScene) и генератор случайных цветов (getRandomColor):

В sceneInit мы добавили две формы. Как вы уже заметили, для того, чтобы справиться с событиями мыши мы используем экземпляр класса CPointerВот он:

JS / pointer.js

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: