HTML 5 – Часть 2. Интерактивный холст

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

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

• wobble – это амплитуда раскачки пузыря, пока он поднимается вверх (посмотрите на пузырь газа в стакане минералки; поднимаясь, он никогда не идет по прямой).
• wperiod – соответственно период раскачки.

Пока количество пузырей не превысило константу initBlobs, создаем новые. В конце, как и в прошлом примере, забиваем функцию отрисовки холста draw() в цикл. Частота вызова функции напрямую определяет скорость анимации.

Обратите внимание на интересное использование функции CreateRadialGradient. Мы заполняем круги с помощью функции fillRect(x,y,width,height), буквальный перевод – заполнить прямоугольник. Но так как градиент у нас радиальный (круговой), заполняется именно область круга, создавая эффект псевдотрехмерности.

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

Вот и все. Если хотите включить пример на свою страницу, рекомендую подключать этот код из отдельного html-файла через фрейм, при прямом включении в тело страницы мною наблюдались различные баги. Живой пример смотрите здесь (кликаем по пункту Interactive canvas).