https://github.com/ziggi/html5movobj

Моё знакомство с html5 canvas
https://github.com/ziggi/html5movobj

Last synced: 19 days ago
JSON representation

Моё знакомство с html5 canvas

• Host: GitHub
• URL: https://github.com/ziggi/html5movobj
• Owner: ziggi
• Created: 2013-02-12T18:16:57.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2013-02-12T18:58:13.000Z (about 12 years ago)
• Last Synced: 2024-04-17T03:43:28.867Z (10 months ago)
• Language: JavaScript
• Homepage: http://ziggi.org/demos/html5movobj/
• Size: 141 KB
• Stars: 1
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


Появилось желание взяться за изучение "убийцы Flash'а" html5, а в частности элемента canvas. Это достаточно интересная технология, позволяющая создавать различные растровые 2d изображения средствами JavaScript. Просидев несколько часов за изучением технологии и вспоминании JavaScript, я написал небольшое интерактивное "приложение", которое, в первую очередь, предназначено для обучения меня и вас. Это обычные круги и прямоугольники, которые можно двигать мышью.

Логика работы


Принцип работы прост: сначала я записываю все создаваемые объекты в общий массив объектов и отрисовываю сцену. Затем в событии, выполняемом при нажатии на сцену, я определяю тип нажатого объекта и добавляю необходимую информацию(тип, номер и смещение курсора относительно начальной точки) о нажатом объекте в массив. После этого описывается событие, которое выполняется при перемещении мыши по сцене, в котором я обновляю координаты перемещаемого объекта в общем массиве объектов. Затем просто перерисовывается вся сцена. Ну и последнее событие, выполняемое при отпускании нажатой кнопки мыши, в котором я просто очищаю массив с информацией о выбранном объекте.

Очень может быть, что я допустил некоторые архитектурные ошибки, с радостью прочитаю ваши замечания и предложения.