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

Eric Bidelman

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

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

1. Sử dụng ảnh động CSS để cập nhật background-position trong JS .
2. Các thủ thuật với .toDataURL() .

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

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

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

1. URL data: làm tăng hao tổn kích thước khoảng 33% cho hình ảnh thu được.
2. Rất nhiều thao tác chạm vào 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 ứng dụng web luôn mượt mà ở tốc độ 60 khung hình/giây.

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

BẢN MINH HỌA

Hóa 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à chưa có thông số kỹ thuật nào được công bố cho tính năng này.

Trước tiên, thay vì chỉ định URL cho thao tác quay lại:

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

sử dụng -webkit-canvas(), tham chiếu một giá trị nhận dạng chuỗi đế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);

Lưu ý: Phương thức này nằm trên đối tượng document chứ không phải trên canvas. Đối số thứ hai có cùng tên được sử dụng trong -webkit-canvas().

Thông tin khác của Dave Hyatt:

Lưu ý: Mỗi tài liệu chỉ có một canvas CSS cho một giá trị nhận dạng chung nhất định. Khi lấy ngữ cảnh vẽ, bạn cũng chỉ định kích thước. Canvas sẽ không bị xoá miễn là bạn liên tục yêu cầu cùng một kích thước. Việc chỉ định kích thước mới tương đương với loại hành vi mà bạn mong đợi nếu bạn đổi kích thước phần tử <canvas>, do đó vùng đệm canvas sẽ bị xoá.

Lưu ý: Tất cả đối tượng quan sát một canvas CSS có cùng tên đều đang chia sẻ canvas đó. Điều này có nghĩa là (tương tự như cách hoạt động của ảnh GIF động), bạn có thể tạo ảnh động và thực hiện ảnh động đó theo cách đồng bộ trên tất cả ứng dụng của canvas. Các thay đổi về bản vẽ sẽ tự động được truyền đến tất cả ứng dụng khách.

Ảnh động

Như đã thấy trong bản minh hoạ, chúng ta có thể sử dụng lại requestAnimationFrame() để tạo ảnh động. Điều này rất tuyệt vì sau khi 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 can thiệp vào DOM.

Bản minh hoạ không có ảnh độ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 ảnh độ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 sẽ 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 động tăng tốc 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 xâm phạm DOM từ JS.

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

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

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

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

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

Xin 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 Giá trị hình ảnh CSS và Mô-đun nội dung 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,...bạn chỉ cần đặt tên. Tuy nhiên, việc có toàn quyền truy cập vào hình ảnh tổng quan nhanh của DOM cũng gây ra một số lo ngại về bảo mật. Đâ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.