Gambar latar belakang kanvas

Eric Bidelman

Menganimasikan gambar latar secara terprogram

Ada dua cara utama orang menganimasikan gambar latar:

1. Gunakan sprite CSS untuk memperbarui background-position di JS .
2. Hacks 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 menetapkan 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. URL data: menambahkan overhead ukuran ~33% ke gambar yang dihasilkan.
2. Banyak DOM yang disentuh (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

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

Pertama, bukan 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);

Catatan: Metode ini ada di objek document, bukan kanvas. Argumen kedua adalah nama yang sama dengan yang digunakan di -webkit-canvas().

Informasi lebih lanjut dari Dave Hyatt:

Catatan: Hanya ada satu kanvas CSS untuk ID global tertentu per dokumen. Saat mendapatkan konteks gambar, Anda juga menentukan ukurannya. Kanvas tidak akan dihapus selama Anda berulang kali meminta ukuran yang sama. Menentukan ukuran baru setara dengan jenis perilaku yang Anda harapkan jika Anda mengubah ukuran elemen <canvas>, sehingga buffering kanvas akan dihapus.

Catatan: Semua objek yang mengamati kanvas CSS dengan nama yang sama akan berbagi kanvas tersebut. Artinya (serupa dengan cara kerja GIF animasi), Anda dapat melakukan animasi dan membuatnya terjadi secara serentak di semua klien kanvas. Perubahan gambar akan diterapkan ke semua klien secara otomatis.

Animasi

Seperti yang terlihat dalam demo, kita dapat menggunakan kembali requestAnimationFrame() untuk mendorong animasi. Ini sangat bagus, karena setelah semuanya terhubung, asosiasi antara CSS dan elemen kanvas akan dipertahankan. Anda tidak perlu mengutak-atik 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. Animasi yang dipercepat hardware kini sepenuhnya digunakan (setidaknya untuk browser tempat fitur ini berfungsi). Dan untuk mengulangi, Anda tidak perlu mengganggu DOM dari JS.

Menggunakan webgl sebagai latar belakang

Tunggu sebentar. Apakah ini berarti kita dapat mendukung latar belakang CSS menggunakan webgl? Tentu saja. WebGL hanyalah konteks 3D untuk kanvas. Cukup ganti "experimental-webgl", bukan "2d", dan selesai.

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

Berikut adalah bukti konsep yang berisi div dengan latar belakangnya yang 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 Nilai Gambar CSS dan Modul Konten yang Diganti Level 4 dan memungkinkan Anda membuat gambar yang dihasilkan dari HTML arbitrer: video, kanvas, konten DOM,...apa pun. Namun, ada masalah keamanan dengan memiliki akses penuh ke gambar snapshot DOM. Hal ini terutama menjadi alasan browser lain belum mengadopsi fitur tersebut.