HTML5 Canvas làm hình nền CSS?

Question

Có thể tạo hình nền của DIV thành canvas có thể được sửa đổi bằng getContext ("2d") không?

Answer 1

Bạn có thể có canvas bên trong div với vị trí tuyệt đối css, các yếu tố khác phải có chỉ mục z lớn hơn canvas.

Answer 2

Vâng, bạn có thể đặt phần tử canvas bên trong div, tối đa hóa chiều cao và chiều rộng, đặt vị trí của nó thành tương đối và chỉ mục z của nó thành giá trị âm.

Tuy nhiên, nếu bạn muốn sử dụng CSS thực background-image:... bạn sẽ phải tạo hình ảnh của mình bên trong canvas. Sau đó bạn có thể sử dụng toDataURL để có được một url dữ liệu mà bạn có thể sử dụng như giá trị so với ban đầu background-image của bạn:

var canvas = document.getElementById('canvas'); 
var data = canvas.toDataURL(); 
var myElement = document.getElementById('myelement'); 

myElement.style.backgroundImage = 'url('+data+')'; 

Nếu bạn không muốn tạo ra một mới nền nhưng thao tác hiện có, tải ban đầu của bạn nền thành một đối tượng hình ảnh (hoặc có được một tài liệu tham khảo) và sử dụng drawImage:

var image = new Image(); 
image.onload = function(){ 
    context.drawImage(this,0,0); 
    someCallbackToManipulateTheImage(); 
} 
var src = myElement.style.backgroundImage.substr(4); 
src.substr(0,src.length - 1); 
image.src = src; 

Answer 3

Đặt background-image của div này:

"url('" + canvas.toDataURL() + "')"; 

Chỉnh sửa: Tại thời điểm đó, lưu ý rằng bạn cũng được tự do làm những gì bạn muốn với canvas, vì hình nền sẽ tiếp tục chỉ chứa dữ liệu hình ảnh trong canvas tại thời điểm bạn gọi là canvas. toDataURL(). Hãy bỏ hoặc vẽ lên canvas, vì nó sẽ không ảnh hưởng đến nền tảng div của bạn tại thời điểm đó.