Регистрация    Вход    Форум    Поиск    FAQ

  •  Новости
  • Beeline + Twitter = чирикай через SMS!

    Beeline + Twitter = чирикай через SMS! На первой картинке обозначены команды, при помощи которых через SMS Вы сможете кого-либо зафолловить или же отписаться, ретвитнуть чей-либо пост или же написать личное сообщение.

    Open Graph Protocol. От создателей Facebook

    Open Graph Protocol. От создателей Facebook Разбираясь с Facebook API, случайно наткнулся на другую интересную разработку от этих людей.

    Глобальное ускорение Wordpress

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




  •  Часы


  •  Поиск

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




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



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

     

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

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

     

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

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

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

     

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



    Рейтинг: 4.7/5, основан на 25 голосах.


    Нравится



    Вернутся назад


       

    Вам будет интересно:

    Потребитель сервиса (Service consumer)

    Экземпляр класса ChannelFactory - это объект, который создает прокси нашего сервиса.

    Алгоритм Брезенхема

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

    CSS3 – не тенями едиными

    CSS эволюциюнирует с огромной скоростью, и уже грозит приставкой в виде цифры “3?.

    Как вывести случайную фотографию из папки на PHP?

    Выкладываю пару набросков по тому, как достать случайную фотографию из папки на сайт.



    •  Публикации


    8 методов раскрутки своего форума с нуля

    8 методов раскрутки своего форума с нуля Итак, у вас имеется свой собственный форум, но его никто не посещает? Мы готовы помочь вам справиться с этой нелегкой проблемой.

    Как привлекать посетителей на проект

    Как привлекать посетителей на проект Данная статья в основном рассчитана на тех, кто самостоятельно занимается продвижением своего проекта.

    Про MySQL, серверы и PayPal

    Про MySQL, серверы и PayPal Проклял все настройки кодировок, проклял DirectAdmin и еле-еле нашел то место где располагается и задается общий пароль для ...

    Реклама в Твиттере. Как подать свой продукт

    Реклама в Твиттере. Как подать свой продукт Твиттер уже давно стал из нового web 2. 0 сервиса рекламной площадкой с огромным количеством потенциальных пользователей ...

    Пока блог на локалхосте

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

    Авторитет блоггера притягивает

    Авторитет блоггера притягивает Долго не знал с чего начать данную статью. Статья что-то типа мыслей вслух и философии.