воскресенье, 27 апреля 2014 г.

HTML 5 Движение фона

 Для того, чтобы сделать фон HTML 5 движущимся, можно воспользоваться следующим рецептом.
Сначала создадим HTML5 канву (или холст).
А затем с помощью не хитрых манипуляций с бесшовной картинкой создадим эффект бесконечного движения

<canvas id="canvas" height="310" width="600">
    Your browser do not support HTML5
</canvas>

<script type="application/javascript">
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext('2d');

// cоздаём объект для манипуляции с картинкой

    img1 = new Image();
// указываем путь к картинке
    img1.src = "allpics/1398564837.png";
 
// начальная координата картинки    
    var x1 = 0;
// начальная координата скопированной картинки = размеру картинки
    var x2 = img1.width;
// шаг   
 var v = -1;

// cоздаём функцию, которую будет вызывать setInterval

    function movebg() {
    // инициализируем содержимое конвы     
     ctx.clearRect(0, 0, canvas.width, canvas.height);
    // изменяем координаты в соответствии с шагом  
        x1+=v;
        x2+=v;
 // если первая координата стала больше картинки - инициализируем координаты и шаг
        if (x1<(-1*img1.width)) {
         x1 = 0;
         x2 = img1.width;
         v = -1;
            }
   // 2 раза помещаем в канву картинку со сдвигом равным  x1 и x2  
        ctx.drawImage(img1,x1,0);
        ctx.drawImage(img1,x2,0);
      
    }

// запуск функции через 25 миллисекунд

   setInterval(movebg, 25);

</script>

Пример можно посмотреть здесь : http://2l4u.ru/pubfiles/64/1360/

Комментариев нет:

Отправить комментарий