Создаём сложный лабиринт в фоне веб-страницы (на клиенте)

Мне показалось немного странным, желание автора этого ^[1] поста, генерировать изображения на сервере, в то время как современные браузеры позволяют делать это на клиенте. Поэтому хочу предложить другой, а точнее даже два других способа генерации фона.

Сразу оговорюсь что, скорее всего, без доработки они будут работать не во всех современных браузерах (тестировал только в Chrome 24 и FF 16 под Linux).

background-image

Как известно ^[2] у background-image в CSS3 можно указывать несколько файлов фонового изображения, а в background-position их координаты. Следовательно, «смещая» всего две небольших картинки можно сгенерировать случайный лабиринт, например таким кодом:

  var images = [];	// имена файлов картинок
  var positions = [];	// координаты
  var l = 26;		// размер картинок (для простоты квадратные)
  var src = ['1.png', '2.png'];
  
  var body = document.getElementsByTagName('body')[0];
  var w = body.scrollWidth/l;
  var h = body.scrollHeight/l;

  for(var i=0;i<h;i++){
    for(var j=0;j<w;j++){
      images.push('url('+src[Math.round(Math.random())]+')'); // выбираем случайную картинку
      positions.push(j*l+'px '+i*l+'px');  // и её координаты
    }
  }

  // склеиваем и присваиваем
  body.style.backgroundImage = images.join(', ');
  body.style.backgroundPosition = positions.join(', ');
  body.style.backgroundRepeat = "no-repeat";

Думаю не сложно догадаться, что такой лабиринт довольно просто динамически обновлять, например, как-то вот так:

  for(var i=0;i<images.length*0.05;i++){
    images[Math.floor(images.length*Math.random())]=('url('+src[Math.round(Math.random())]+')');
  }
  body.style.backgroundImage = images.join(', ');
  body.style.backgroundPosition = positions.join(', ');
  body.style.backgroundRepeat = "no-repeat";

Серьёзный минус этого способа в том, что он раздувает элемент до неприличных размеров, кроме того он довольно медленный (похоже по той же причине).

Canvas+Blob

Немного подумав, я решил, что можно сделать реализацию на Canvas+Blob. Суть примерно такая:

• создаём холст и устанавливаем у него размер равный размеру элемента, для которого создаём фон;
• заполняем холст рисунком;
• с помощью JavaScript-Canvas-to-Blob ^[3] конвертируем содержимое в Blob;
• и с помощью URL.createObjectURL получаем URL блоба.

Полученный URL присваиваем свойству body.style.backgroundImage:

  var body = document.getElementsByTagName('body')[0];
  canvas.toBlob(function(blob){
    var url = URL.createObjectURL(blob);
    body.style.backgroundImage = "url('" + url + "')";
  })

Правда и здесь не обошлось без недостатка. При обновлении значения backgroundImage фон на мгновение исчезает. Хотя это довольно легко устраняется, например наложением картинок на время подгруздки:

    var url = URL.createObjectURL(blob);
    body.style.backgroundImage += ", url('" + url + "')";
    body.style.backgroundRepeat = "no-repeat";
    setTimeout(function(){
      body.style.backgroundImage = "url('" + url + "')";
    },200);

Пример 1 (background-image) ^[4]
Пример 2 (Canvas+Blob) ^[5]

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

p.s. Опыта написания статей почти не имею, так что сильно не ругайтесь, ежели чего не так.

Автор: g1t5

Источник ^[6]