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

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

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

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

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

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

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




  •  Часы


  •  Поиск

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




HTML 5 – Часть 1. Анимированный холст



    Думаю, каждый из вас уже играл или хотя-бы видел интерактивного “пакмана” на главной странице Google. И хотя эта игра сделана безо всякого холста, именно она меня побудила обратить свой взгляд на HTML 5, чтобы узнать, как можно создать динамичные изображения на странице безо всякого флэша.

     

    Для начала немного теории. Холст (Canvas) – это элемент HTML 5, в котором можно выводить и генерировать изображения. Генерация изображений производится с помощью Javascript, и все работает в любом современном браузере.

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

     

    Итак:

    Намечаем холст в HTML:

    <canvas id="canv" width="400" height="250" style="width:400px;height:250px;margin:0 0 20px 230px;">HTML 5 Canvas presentation was meant to be here.</canvas>

    <script>

    Как видите, я так-же открыл тег script, так как

    дальнейшие действия будут в Javascript.

     

    Инициируем переменные:

     

    var width = document.getElementById('canv').width;

    var height = document.getElementById('canv').height;

    var init;

    var context;

    var g;

    function Item(x,y,r,speed,c){

    this.x = x;

    this.y = y;

    this.r = r;

    this.speed = speed;

    this.c = c;

    }

    var items = new Array();

    Функция Item – нужна для эмуляции многомерных массивов. Ведь у каждого элемента (круга) есть свои параметры (координаты возникновения, диаметр, скорость, цвет).

     

    Инициируем холст:

     

    function initiate(){

    init = document.getElementById('canv');

    context = init.getContext('2d');

    for (i = 0; i < 20; i++) {

        x = Math.floor(Math.random()*(width+1));

        y = Math.floor(Math.random()*(height+1));

        r = Math.floor(Math.random()*20)+1; // 1-30;

        speed = Math.floor(Math.random()*10)-3;

        //скорость нулевой быть не может:

        if (speed == 0) speed = 1;

        //генерируем цвета

        c = "rgba(";

        for (j = 0; j < 3; j++) {

          v = Math.floor(Math.random()*256);

          c += v + ",";

        }

        c += "0.7)";

        //записываем элемент в массив

        it = new Item(x, y, r, speed, c);

        items.push(it);

      }

     

    setInterval("draw();",10);

    }

    С математическими формулами, думаю все понятно. Функция rgba генерирует цвет, первые три аргумента – это числа (0-256), а четвертый регулирует альфа-канал (прозрачность) и принимает значения от 0 до 1. Первые три заполняем случайными значениями, а четвертый у нас равен 0.7 всегда. Если хотите, генерируйте его случайно, по аналогии.

     

    Переходим к функции draw(), которую мы циклично вызываем через setInterval():

     

    function draw(){

     

    //задник

    g = context.createLinearGradient(0,0,0,height);

    g.addColorStop(0,'#202020');

    g.addColorStop(1,'#aaa');

    context.fillStyle = g;

    context.fillRect(0,0,width,height);

     

      for (i in items) {

        context.fillStyle = items[i].c;

        context.beginPath();

        context.arc(items[i].x,items[i].y,items[i].r,0,Math.PI*2,true);

        context.fill();

     

        items[i].y = items[i].y+items[i].speed; //задаем движение

        if (items[i].y>height+items[i].r) items[i].y = -items[i].r;//круг бесконечно движется по прямой, как только заходит за верхнюю грань, появляется снизу

        else if (items[i].y<-items[i].r) items[i].y = height+items[i].r;

      }

    }

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



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


    Нравится



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


       

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

    Microsoft Dreamspark. Халявный софт для студентов.

    По данной программе мягкотелые дают бесплатно скачать студентам много замечательного софта, причем даже недавно вышедшие Visual Studio 2008 и Expression Studio.

    Нативные расширения

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

    GRAVATAR не работает! Как исправить баг в WordPress?

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

    Селекторы (selectors) для тега INPUT

    Пиши себе спокойно, выноси стили в style. css и будет тебе счастье.



    •  Публикации


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

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

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

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

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

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

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

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

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

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

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

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