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”, без перезагрузки всей страницы.