Leinwand Animation als div Hintergrund - EaselJS

Question

Zuerst tut mir leid für mein schlechtes Englisch ^^

Ich bin auf meiner Website arbeiten, und ich möchte meine Leinwand Animation setzen (erstellt mit easelJS Rahmen) in meinem div Hintergrund.

Ich habe versucht, so etwas wie dieses:

.canvas-bg { 
    background: -webkit-canvas(animation); 
} 

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

Es auf Safari arbeiten (aber die Animation angehalten wird, wenn ich die Seite aktualisieren) und funktioniert nicht bei allen auf chrome ...

So haben können Sie eine animierte Leinwand als Div-Hintergrund erstellen? Wie das blaue Banner dieser Website zum Beispiel: http://www.createjs.com/easeljs

Vielen Dank!
Julien.

Answer 1

Sie können die Zeichenfläche in Ihr DIV einschließen und dann seine Position als absolut festlegen. Andere Inhalte im DIV werden oben liegen.

#canvas { 
    position: absolute; 
    display: inline; 
} 

Hier ist ein schnelles Beispiel: http://jsfiddle.net/obcv1rex/1/

Sie können Text zur ersten DIV hinzufügen, um es bewegen zu sehen. Ich setze die Größe auf 1000x1000, aber um es dynamischer zu machen, würdest du die Leinwand mit JavaScript bemaßen (mit CSS skalierst du den Inhalt).