Фоновые изображения на основе холста

Программная анимация фоновых изображений

Существует два основных способа анимации фоновых изображений :

  1. Используйте спрайты CSS для обновления background-position в JS.
  2. Взломы с помощью .toDataURL() .

Первый вариант отлично работает, если у вас есть изображение заранее, но что, если ваш источник нужно сгенерировать программно, скажем, с помощью <canvas> ? Решение № 1 — использовать .toDataURL() на холсте и установить фон для сгенерированного URL:

while(1) {
    var url = canvas.toDataURL('image/jpeg');
    el.style.background = 'url(' + url + ')';
}

При этом есть две проблемы:

  1. data: URL-адреса увеличивают размер результирующего изображения примерно на 33%.
  2. Тонна трогательного DOM ( el.style ).

Оба эти метода неэффективны: неприемлемы для всегда плавного веб-приложения со скоростью 60 кадров в секунду.

Использование 2D-холста в качестве фона

Холст в качестве фоновой демонстрации
ДЕМО

Оказывается, в WebKit уже много лет существует нестандартный API, который может использовать холст в качестве источника фона. К сожалению, для этой функции не существует опубликованной спецификации .

Во-первых, вместо указания URL-адреса сзади:

.bg {
    background: url(bg.png) no-repeat 50% 50%;
}

используйте -webkit-canvas() , ссылаясь на строковый идентификатор на контекст холста:

.canvas-bg {
    background: -webkit-canvas(animation) no-repeat 50% 50%;
}

Далее нам нужно создать 2d-контекст с помощью специальной версии .getContext() :

var ctx = document.getCSSCanvasContext('2d', 'animation', 300, 300);

Дополнительная информация от Дэйва Хаятта:

Анимации

Как видно из демо, мы можем повторно использовать requestAnimationFrame() для управления анимацией. Это здорово, потому что после подключения связь между CSS и элементом холста сохраняется . Нет необходимости возиться с DOM.

Демо не анимируется в Chrome?

Текущий стабильный канал Chrome (версия 23) имеет crbug.com/161699 , который не позволяет анимации requestAnimationFrame() правильно обновлять фон. Это было исправлено в Chrome 25 (в настоящее время Canary). Демо-версия также должна хорошо работать в текущем Safari.

Преимущества производительности

Мы говорим здесь о холсте. Анимация с аппаратным ускорением теперь полностью доступна (по крайней мере, для браузеров, в которых эта функция работает). И еще раз повторю: нет необходимости приставать к DOM из JS.

Использование WebGL в качестве фона

Держаться секунду. Означает ли это, что мы можем использовать фон CSS с помощью webgl? Конечно, это так! WebGL — это просто трехмерный контекст для холста. Просто замените «experimental-webgl» вместо «2d» и вуаля.

var gl = document.getCSSCanvasContext('experimental-webgl', 'animation', 300, 150);

Вот доказательство концепции, которая содержит элемент div с фоном, нарисованным с использованием вершинных и фрагментных шейдеров: ДЕМО

Другие подходы

Стоит отметить, что в Mozilla уже довольно давно есть -moz-element() ( MDN ). Это часть спецификации CSS-изображений и модуля замененного контента уровня 4 , которая позволяет создавать изображения, сгенерированные из произвольного HTML: видео, холста, содержимого DOM... как вы его называете. Однако существуют проблемы безопасности, связанные с полным доступом к снимкам DOM. В первую очередь именно поэтому другие браузеры не поддерживают эту функцию.