HTML5 Canvas als CSS Hintergrundbild?

Question

Ist es möglich, das Hintergrundbild eines DIV zu einem Canvas zu machen, das mit getContext ("2d") geändert werden kann?

Answer 1

Sie können eine Canvas innerhalb der div mit absoluter CSS-Position haben, andere Elemente müssen Z-Index größer als die Leinwand haben.

Answer 2

Nun, Sie könnten ein Canvas-Element innerhalb des div platzieren, seine Höhe und Breite maximieren, seine Position relativ und seinen Z-Index auf einen negativen Wert setzen.

Wenn Sie jedoch eine echte CSS background-image:... verwenden möchten, müssten Sie Ihr Bild in der Zeichenfläche erstellen. Sie könnten dann toDataURL verwenden, um eine Daten URL zu erhalten, die Sie als Wert für Ihre ursprüngliche background-image verwenden:

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

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

Wenn Sie einen neuen Hintergrund erstellen nicht wollen, sondern eine bestehende, laden Sie Ihre Original manipulieren Hintergrund in ein Bildobjekt (oder einen Verweis erhalten) und verwenden 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

das Hintergrund-Bild des div auf dieses Set:

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

Bearbeiten: An diesem Punkt, beachten Sie, dass Sie auch frei tun können, was Sie mit der Leinwand tun möchten, da das Hintergrundbild weiterhin nur die Bilddaten enthält, die in der Leinwand in dem Moment, als Sie Leinwand aufgerufen haben. toDataURL(). Ziehe es frei, auf die Leinwand zu legen oder zu zeichnen, da dies den Hintergrund deines Divs zu diesem Zeitpunkt nicht beeinflusst.