Предыдущий ролик Следующий ролик  

Видео урок: Реальный пример: CanvasMol

HTML5: графика и анимация с Canvas

Прежде чем мы приступим к работе с canvas, давайте взглянем на некоторые реальные примеры, которые были созданы при помощи canvas, чтобы достичь тех эффектов, которые раньше требовали плагинов типа Silverlight и Flash, а теперь их реализация возможна в современных браузерах при помощи HTML5. Этот пример называется canvasMol. Он находится на сайте, который называется alteredqualia.com. Здесь показано, как может быть использован canvas, чтобы показать молекулу вещества.

Давайте это рассмотрим. Вот мое самое любимое вещество - Caffeine (кофеин). Вы можете увидеть, что случится, если я кликну на молекулу в этом списке: выплывет рисующая поверхность canvas, и мне будет показана молекула этого конкретного вещества. В данном случае это молекула кофеина. Я могу взять эту молекулу и повернуть ее. Также я могу выбрать другую молекулу. Вот, например, фруктоза (Fructose), второе мое любимое вещество. Вы видите, что появляется другой элемент canvas, частота кадров немного падает, потому что отрисовка происходит в режиме реального времени, и чем больше элементов canvas у вас есть, тем больше обработки они требуют.

Давайте рассмотрим еще одно вещество. Давайте добавим ликопин (Lycopene), мы можем промотать вниз и увидеть его. Это довольно довольно сложная молекула, но у вас уже есть о ней представление. canvas используется для того, чтобы отобразить молекулярные связи с отдельными атомами. Вы видите, что все они раскрашены определенным способом, а также они вращаются. Каждый элемент canvas отвечает на действия мышки. И мы можем добавлять новые вещества из списка. Давайте добавим пенициллин (Penicillin). Я могу добавлять каждое из этих веществ по порядку, и тогда всплывет маленькое новое окошко с элементом canvas внутри.

Вы видите, что каждый canvas теперь вырисовывает каждую молекулу в режиме реального времени. И каждый из них отвечает на действия мыши. Вы видите, что если я добавляю больше элементов canvas, частота кадров совсем немного падает, но не сильно. Все элементы просматриваются и отвечают на действия мышки. Это действительно отличный пример, которому раньше точно требовался плагин, а сейчас здесь используется только canvas в HTML5.