Gambar latar belakang kanvas

Eric Bidelman

Twitter GitHub Halaman beranda

Menganimasikan gambar latar secara terprogram

Ada dua cara utama untuk menganimasikan gambar latar:

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

Yang pertama berfungsi dengan baik jika Anda sudah memiliki gambar sebelumnya, tetapi bagaimana jika sumber Anda harus dibuat secara terprogram, misalnya, oleh <canvas>? Solusi untuk #1 adalah dengan 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 terkait hal ini:

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

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

Menggunakan kanvas 2d sebagai latar belakang

DEMO

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

Pertama, alih-alih menentukan URL untuk bagian belakang:

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

gunakan -webkit-canvas(), dengan 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 berada di objek document dan bukan di 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 menggunakan kanvas tersebut. Ini berarti bahwa (serupa dengan cara kerja GIF animasi), Anda dapat membuat animasi dan membuatnya terjadi pada langkah yang terkunci pada semua klien kanvas. Perubahan gambar akan otomatis diterapkan ke semua klien.

Animasi

Seperti yang terlihat dalam demo, kita dapat menggunakan kembali requestAnimationFrame() untuk mendorong animasi. Ini hal yang bagus, karena setelah semuanya terhubung, hubungan antara CSS dan elemen kanvas dapat dipertahankan. 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() mengupdate latar belakang dengan benar. Hal ini telah diperbaiki di Chrome 25 (saat ini Canary). Demo juga akan berfungsi dengan baik di Safari saat ini.

Manfaat performa

Kita membahas kanvas di sini. Animasi dengan akselerasi hardware kini sepenuhnya diputar (setidaknya untuk browser tempat fitur ini berfungsi). Untuk lebih memperjelas, tidak perlu mengubah DOM dari JS.

Menggunakan webgl sebagai latar belakang

Tunggu sebentar. Apakah ini berarti kami dapat mengaktifkan latar belakang CSS menggunakan webgl? Tentu saja demikian. WebGL hanyalah konteks 3d untuk kanvas. Cukup tukar ke "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 fragmen dan vertex: 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,...semuanya. Namun, ada masalah keamanan jika memiliki akses penuh ke gambar snapshot DOM. Hal inilah yang menyebabkan browser lain tidak menggunakan fitur tersebut.