Gambar latar belakang kanvas

Menganimasikan gambar latar secara terprogram

Ada dua cara utama orang-orang menganimasikan gambar latar belakang:

  1. Gunakan sprite CSS untuk memperbarui background-position di JS .
  2. Tips dengan .toDataURL() .

Yang pertama berfungsi dengan baik jika Anda memiliki gambar sebelumnya, tetapi bagaimana jika sumber Anda perlu dibuat secara terprogram, misalnya, oleh <canvas>? Solusi untuk #1 adalah menggunakan .toDataURL() di kanvas dan menyetel latar belakang ke URL yang dihasilkan:

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

Ada dua masalah dengan hal ini:

  1. data: URL menambahkan overhead ukuran sekitar 33% pada gambar yang dihasilkan.
  2. Banyak sentuhan DOM (el.style).

Kedua metode ini tidak efisien: tidak dapat diterima untuk aplikasi web 60 fps yang selalu lancar.

Menggunakan kanvas 2D sebagai latar belakang

Demo latar belakang kanvas
DEMO

Ternyata, ada API non-standar yang telah dimiliki WebKit selama bertahun-tahun yang dapat menggunakan kanvas sebagai sumber untuk latar belakang. Sayangnya, tidak ada spesifikasi yang dipublikasikan untuk fitur ini.

Pertama, alih-alih menentukan URL untuk kembali:

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

gunakan -webkit-canvas(), yang mereferensikan ID string ke konteks kanvas:

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

Selanjutnya, kita perlu membuat konteks 2d dengan versi khusus .getContext():

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

Informasi lebih lanjut dari Dave Hyatt:

Animasi

Seperti yang terlihat dalam demo, kita dapat menggunakan kembali requestAnimationFrame() untuk mendorong animasi. Hal ini sangat bagus, karena setelah semuanya terhubung, asosiasi antara CSS dan elemen kanvas akan dipertahankan. Anda tidak perlu memanipulasi DOM.

Demo tidak dianimasikan di Chrome?

Saluran stabil Chrome saat ini (versi 23) memiliki crbug.com/161699, yang mencegah animasi requestAnimationFrame() memperbarui latar belakang dengan benar. Masalah ini telah diperbaiki di Chrome 25 (saat ini Canary). Demo juga akan berfungsi dengan baik di Safari saat ini.

Manfaat performa

Kita sedang membahas kanvas di sini. Animasi yang diakselerasi hardware kini sepenuhnya berfungsi (setidaknya untuk browser yang mendukung fitur ini). Dan untuk menegaskan kembali, Anda tidak perlu mengubah DOM dari JS.

Menggunakan webgl sebagai latar belakang

Tunggu sebentar. Apakah ini berarti kita dapat mengaktifkan latar belakang CSS menggunakan WebGL? Tentu saja! WebGL hanyalah konteks 3D untuk canvas. Cukup ganti "2d" dengan "experimental-webgl", dan voila.

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

Berikut adalah bukti konsep yang berisi div dengan latar belakangnya digambar menggunakan shader vertex dan fragmen: DEMO

Pendekatan lainnya

Perlu diperhatikan bahwa Mozilla telah memiliki -moz-element() (MDN) selama beberapa waktu. Ini adalah bagian dari spesifikasi CSS Image Values and Replaced Content Module Level 4 dan memungkinkan Anda membuat gambar yang dihasilkan dari HTML arbitrer: video, kanvas, konten DOM,...sebutkan saja. Namun, ada masalah keamanan terkait akses penuh ke gambar snapshot DOM. Inilah alasan utama mengapa browser lain belum mengadopsi fitur tersebut.