Beispiele, die ich benutze <canvas> haben immer eine tatsächliche canvas Element in der HTML. Sage ich zum Beispiel schon ein <header> Element, das ich gerne zeichnen würde, gibt es eine Möglichkeit, es direkt als Leinwand zu verwenden? Oder muss ich dieses canvas-Element hinzufügen und sicherstellen, dass es die Kopfzeile füllt?Gibt es eine Möglichkeit, ein Element als Leinwand zu verwenden?
Ich war zuerst skeptisch, aber es gibt einen Weg zu erreichen fast, dass, mit CSS und getCSSCanvasContext() mit dem Webkit. Auf diese Weise können Sie eine Leinwand als Hintergrund anzeigen, sodass Sie sie wie eine Leinwand steuern können.
Ex:
HTML
<header></header>
CSS
header { background: -webkit-canvas(fooBar); }
JavaScript (wenn das Dokument fertig/onload)
Ein vollständiges Beispiel und weitere Spezifikationen sind here.
Hoffe, das ist bequem.
Upvote für eine interessante Alternative, aber Sie könnten auch CSS-Position ein tatsächliches canvas Element unter oder setzen Sie ein canvas-Element in der Kopfzeile. – markE
Von Chrom 46 wurde das entfernt. Siehe https://bugs.chromium.org/p/chromium/issues/detail?id=475655 obwohl "-moz-element" immer noch da ist, verlasse dich nicht darauf. Sie können den Hintergrund eines gerenderten Canvas über 'canvas.toDataURL' und css' URL ("url") festlegen; 'obwohl es langsam ist. – Blindman67
Nein. Andere HTML-Elemente verfügen nicht über die Funktionen von html5 canvas. Fügen Sie einfach ein tatsächliches Canvas-Element als untergeordnetes Element Ihrer Kopfzeile hinzu. – markE