Содержание     ►   Черчение на холсте при помощи библиотеки canvas2D




Введение

Данный сайт можно считать продолжением (или дополнением) моего другого сайта Three.js и геометрия. На сайте "Three.js и геометрия" было рассмотрено создание шестнадцати моделей огранок алмазов. В качестве инструмента для вывода изображений на экран была использована библиотека ThreeJS. На новом сайте, который я назвал "Canvas и геометрия" для этой цели используется HTML5 Canvas без каких либо библиотек построенных на основе WebGL (таких как ThreeJS или BabylonJS). Однако все, что было сделано на сайте "Three.js и геометрия" в плане отрисовки модели, нумерации вершин, задания значений параметров, выбора граней многогранников и т.д. мне удалось сохранить и на новом сайте. Кроме того было добавлено несколько новых возможностей. Например сделана имитация освещения моделей.

При создании online-программ находящихся на сайте использовались самые простые конструкции языка JavaScript. Но для понимания работы этих программ требуется некоторый опыт в использовании обработчиков событий мыши возникающих при ее движении по холсту и при нажатии ее клавиш.

Все online-программы сделаны максимально интерактивными. Например, при помощи мыши можно не только выбрать любую грань, но также посмотреть значения координат модели в любой ее точке. При желании можно выключать/включать проверку корректности построения модели, менять цвет освещения и его яркость, а также производить другие манипуляции с 3D-моделями многогранников.

Для отрисовки моделей и нанесения их размеров на холст была сделана библиотека canvas2D, которая фактически представляет собой небольшую обертку вокруг функций HTML5 Canvas. При этом функции входящие в библиотеку canvas2D сделаны таким образом, чтобы их было максимально удобно использовать совместно с функциями входящими в состав библиотеки WebGeometry, предназначенной для геометрических расчетов на плоскости и в пространстве.