Анимированный задний фон для сайта с помощью Canvas и Html5

В этом уроке будем продолжать изучать новые возможности html5 canvas и научимся делать анимированный задний фон для сайта. Многие даже не предполагали что такое возможно, включая меня. Но после начала изучения технологии Canvas я понял, что такое возможно!

Для того чтобы вы поняли как сделать анимированный фон для своего сайта вам потребуются базовые знания простого html, а для полного понимания вы должны знать html5 и технологию Canvas.

Посмотреть пример.

Перейдём к изучению кода, сначала посмотрим как выглядит javascript сценарий:

<script type="text/javascript">
var canvas, ctx, w, h;
var video;
function init() {
video = document.getElementById("video");
canvas = document.getElementById("canvas");
w = canvas.width;
h = canvas.height;
ctx = canvas.getContext("2d");
ctx.clearRect(0,0,w,h);
ctx.strokeRect(0,0,w,h);
vid();
}
function vid() {
ctx.drawImage(video, 1, 1);
setTimeout("vid()",25);
}
</script>

ctx.drawImage(video, 1, 1); - Где значения 1, 1, Точка старта отображения видео файла.

setTimeout("vid()",25); - Запуск функции vid(), асинхронно, с задержкой в 25 миллисекунд.

Как вы видите, функция vid() занимает всего 4 строки кода, всё остальное осуществляется с помощью html5.

<input value="Форма ввода" type="text" style="position:absolute; z-index:2; left:240px; top:60px;" />

<h3 style="position:absolute; z-index:2; left:225px; top:5px; color:#FFFF00;">Анимированный фон</h3>

<input value="Кнопка" type="button" style="position:absolute; z-index:2; left:270px; top:85px; color: #0000FF; width:100;">

<canvas id="canvas" width="640" height="470" style="z-index:1;">
</canvas>

<video id="video" src="1.ogv" autoplay style="position:absolute; z-index:0; visibility:hidden;" />

За подключение видео отвечает тег video, у которого есть следующие атрибуты:

  • id="video" - служит для соединением с Canvas;
  • src="1.ogv" - путь к файлу с видео;
  • autoplay - авто запуск видео при загрузке страницы;

Обратите внимание на значения в style - абсолютное позиционирование, z-index = 0 и невидимость.

Html5 поддерживает только видео файлы формата .ogv, поэтому, каждый раз приходиться конвертировать выбранное видео. Инструкция по конвертированию видео в формат .ogv будет в следующем уроке.

Поделитесь ссылкой если мы вам помогли!

Читайте также:

Конвертируем видео в формат .ogv для воспроизведения через html5 плеер

Узнаём значение post_max_size с помощью функции ini_get

Программа для удаления ненужных файлов с компьютера

Как обновить компьютер

Сколько идет письмо по России

Добавить комментарий:

Минимум 100 символов.
Модераторы detected!

Вы ввели сообщение длиной символов

Три + Пять ? =