HTML5 -Leinwand mit absoluter Position funktioniert nicht

Question

Leinwand mit absoluter Position funktioniert nicht, wie Sie hier sehen können:http://jsfiddle.net/733zs/1/ (In Firefox und Chrom getestet) Das Rechteck sollte eine Größe von 500 x 500 Pixel haben.

Gibt es eine Möglichkeit, es zum Laufen zu bringen, ohne manuell Breite und Höhe zu setzen? Oder habe ich Fehler gemacht?

Answer 1

Sie müssen die Breite und Höhe manuell einstellen.

Dies kann über das JavaScript -OnResize -Ereignis erfolgen - was in Ordnung ist, da Sie Ihre Leinwand sowieso onresizieren Sie fast immer neu.

BEARBEITEN:

Von der W3 -Spezifikation finden Sie hier die Canvas -Dom -Schnittstelle:

http://www.w3.org/tr/html5/the-canvas-element.html

interface HTMLCanvasElement : HTMLElement {
           attribute unsigned long width;
           attribute unsigned long height;

  DOMString toDataURL(in optional DOMString type, in any... args);
  void toBlob(in FileCallback, in optional DOMString type, in any... args);

  object getContext(in DOMString contextId, in any... args);
};

Das Canvas -Element verfügt über zwei Attribute, um die Größe des Koordinatenraums zu steuern: Breite und Höhe. Diese Attribute müssen, wenn sie angegeben sind, Werte aufweisen, die gültige nicht negative Ganzzahlen sind. Die Regeln für die Parsen nicht negativer Ganzzahlen müssen verwendet werden, um ihre numerischen Werte zu erhalten. Wenn ein Attribut fehlt oder wenn das Parsen seines Werts einen Fehler zurückgibt, muss stattdessen der Standardwert verwendet werden. Das Breitenattribut standardmäßig auf 300, und das Höhenattribut stand auf 150.

Answer 2

Das Rechteck wird abgeschnitten, da das Leinwandelement nur 300.150 Pixel groß ist.

http://jsfiddle.net/733zs/3/

Answer 3

Die Positionierung funktioniert korrekt. Sie zeichnen nur die schwarze Schachtel in der unteren rechten Ecke der Leinwand.