Hình nền dựa trên canvas

Tạo ảnh nền động theo phương thức lập trình

Có hai cách chính để tạo ảnh nền động:

  1. Sử dụng hình sprit CSS để cập nhật background-position trong JS .
  2. Các giải pháp tạm thời với .toDataURL() .

Cách đầu tiên hoạt động hiệu quả nếu bạn có sẵn hình ảnh, nhưng nếu nguồn của bạn cần được tạo theo phương thức lập trình, chẳng hạn như bằng <canvas> thì sao? Giải pháp cho vấn đề số 1 là sử dụng .toDataURL() trên canvas và đặt nền thành URL đã tạo:

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

Có 2 vấn đề với cách này:

  1. URL data: thêm mức hao tổn kích thước khoảng 33% vào hình ảnh kết quả.
  2. Rất nhiều thao tác trên DOM (el.style).

Cả hai phương thức này đều không hiệu quả: không chấp nhận được đối với một ứng dụng web 60 khung hình/giây luôn mượt mà.

Sử dụng canvas 2D làm nền

Bản minh hoạ về canvas dưới dạng nền
DEMO

Hoá ra, có một API không chuẩn mà WebKit đã có trong nhiều năm, có thể lấy canvas làm nguồn cho nền. Tuy nhiên, rất tiếc là không có thông số kỹ thuật nào được xuất bản cho tính năng này.

Trước tiên, thay vì chỉ định URL cho nền:

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

hãy sử dụng -webkit-canvas(), tham chiếu một chuỗi nhận dạng đến ngữ cảnh canvas:

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

Tiếp theo, chúng ta cần tạo ngữ cảnh 2D bằng một phiên bản đặc biệt của .getContext():

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

Thông tin thêm của Dave Hyatt:

Hiệu ứng chuyển động

Như bạn thấy trong bản minh hoạ, chúng ta có thể sử dụng lại requestAnimationFrame() để tạo hiệu ứng chuyển động. Điều này rất hữu ích vì sau khi mọi thứ được kết nối, mối liên kết giữa CSS và phần tử canvas sẽ được giữ nguyên. Bạn không cần phải chỉnh sửa DOM.

Bản minh hoạ không có hiệu ứng chuyển động trong Chrome?

Kênh ổn định hiện tại của Chrome (phiên bản 23) có crbug.com/161699, ngăn hiệu ứng chuyển động requestAnimationFrame() cập nhật nền đúng cách. Vấn đề này đã được khắc phục trong Chrome 25 (hiện là Canary). Bản minh hoạ cũng hoạt động tốt trong Safari hiện tại.

Lợi ích về hiệu suất

Chúng ta đang nói về canvas. Hiệu ứng chuyển động được tăng tốc bằng phần cứng hiện đã hoạt động đầy đủ (ít nhất là đối với các trình duyệt mà tính năng này hoạt động). Và xin nhắc lại, bạn không cần phải chỉnh sửa DOM từ JS.

Sử dụng webgl làm nền

Đợi một chút. Điều này có nghĩa là chúng ta có thể cung cấp năng lượng cho nền CSS bằng webgl không? Tất nhiên là có! WebGL chỉ là ngữ cảnh 3D cho canvas. Chỉ cần thay "experimental-webgl" bằng "2d" là xong.

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

Sau đây là bản minh hoạ khái niệm chứa một div có nền được vẽ bằng trình đổ bóng đỉnh và trình đổ bóng mảnh: DEMO

Các phương pháp khác

Bạn cần lưu ý rằng Mozilla đã có -moz-element() (MDN) trong một thời gian khá dài. Đây là một phần của thông số kỹ thuật Mô-đun giá trị hình ảnh CSS và nội dung được thay thế cấp 4, cho phép bạn tạo hình ảnh được tạo từ HTML tuỳ ý: video, canvas, nội dung DOM,... Tuy nhiên, có những lo ngại về vấn đề bảo mật khi có quyền truy cập đầy đủ vào hình ảnh chụp nhanh của DOM. Đây là lý do chính khiến các trình duyệt khác chưa áp dụng tính năng này.