Необычные примеры использования HTML5 графики в сети

Данная статья посвящена демонстрации оригинальных примеров создания компьютерной графики с использованием технологии HTML5.

HTML5 становить все более и более востребованным, создавая меньшую нагрузку на процессор по сравнению с технологией Flash. К тому же HTML5, как и JavaScript не требует установки дополнительного программного обеспечения и обрабатывается непосредственно браузером.

Читать еще про HTML5.

Сейчас в сети распространяются все больше ресурсов с использованием нового графического элемента HTML5 - canvas. Я подобрал, на мой взгляд, наиболее необычные примеры.

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

1. FishBowl

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




2. 3D Earth

Анимированная модель земного шара со множеством эффектов.




3. CanvasMol

Приложение, созданное для наглядной демонстрации химического состава некоторых веществ.




4. Magnetic

Всё начинается с пары “магнитов”, которые можно перетаскивать по экрану. Частицы света вертятся по орбите вокруг них. Поменяв положение магнита, вы смените и орбиту спутников. Если вы хотите больше магнитов и частиц, просто щёлкните два раза мышкой.




5. Canvas Trees

Автор - Kenneth Jorgenson. Вы заходите на веб-сайт и видите как на белом фоне черными чернилами прорисовывается дерево. Это происходит случайным образом, а значит, каждый раз после обновления страницы вы увидите новое дерево.




6. Mta.me Conductor

Приложение, в котором по экрану движутся разноцветные точки, издающие мелодию при столкновении друг с другом. Также вы можете зажав кнопку мыши сами получить мелодию, пересекая линий.




7. Doogle Gmail

Небольшая игра-стрелялка. Вот только главный герой – Gmail. Так же, как в классическом шутере, у вас несколько жизней, счет, и всемогущий лазер. Приложение создано для демонстрации того, что HTML5 не уступает FLash.




8. Emberwind

Автор - Эрик Мюллер (Erik M?ller), работающий в компании Opera Software портировал игру Emberwind для работы внутри web-браузера. Функциональность проверена в свежих версиях браузеров Opera, Internet Explorer, Firefox, Chrome и Safari. Игра автоматически определяет текущие возможности браузерного движка и использует только поддерживаемые данным браузером функции. Например, при наличии поддержки WebGL используется данный API, иначе отрисовка производится через тег canvas. Из планов на будущее отмечается реализация поддержки звукового оформления, для чего будут использованы возможности HTML5-элемента audio.