Canvas Element – W3C Spezifikation

Das Canvas-Element bietet noch nie zuvor dagewesene Möglichkeiten zur grafischen Darstellung dynamischer Inhalte. Mit steigendem Entwicklungsfortschritt und der Etablierung von Frameworks, um dieses recht komplexe Element besser zugänglich zu machen, werden Web-Anwendungen entstehen, die Desktop-Anwendungen in der Bedienbarkeit und der Fülle grafischer Manipulationsmöglichkeiten in nichts nachsteht.

Doch zur segensreichen Neuerung führt ein steiniger Weg. Selfhtml5 bietet zahlreiche Informationen, wie z.B. den sehr hilfreichen Canvas-Table, doch auch die Dokumentation der w3c im Original wollen wir Ihnen nicht vorenthalten.

The canvas Element

Die wichtigsten Punkte daraus hier kurz beschrieben…

DOM Interface

interface <dfn id="htmlcanvaselement">HTMLCanvasElement</dfn> :
 <a href="http://dev.w3.org/html5/spec/elements.html#htmlelement">HTMLElement</a>
 {attribute unsigned long <a title="dom-canvas-width" 
href="http://dev.w3.org/html5/spec/the-canvas-element.html#dom-canvas-width">
width</a>;attribute unsigned long <a title="dom-canvas-height" 
href="http://dev.w3.org/html5/spec/the-canvas-element.html#dom-canvas-height">
height</a>;

  DOMString <a title="dom-canvas-toDataURL" 
href="http://dev.w3.org/html5/spec/the-canvas-element.html#dom-canvas-todataurl">
toDataURL</a>(in optional DOMString type, in any... args);

  object <a title="dom-canvas-getContext" 
href="http://dev.w3.org/html5/spec/the-canvas-element.html#dom-canvas-getcontext">
getContext</a>(in DOMString contextId);
};

Attribute

Das canvas Element kennt die Attribute

  • width (in px, default 300)
  • height (in px, default 150)

für die automatisch der angegebenene Vorgabewert verwendet wird, wenn die Attribute nicht spezifiziert sind. Das setzten der Attribute setzt das Canvas-Element zurück auf „transparentes Schwarz“; d.h. evlt. bereits erzeugter Inhalt wird gelöscht.

Beispiel:

  // canvas is a reference to a &lt;canvas&gt; element
  var context = canvas.getContext('2d');
  context.fillRect(0,0,50,50);
  canvas.setAttribute('width', '300'); // clears the canvas
  context.fillRect(0,100,50,50);
  canvas.width = canvas.width; // clears the canvas
  context.fillRect(100,0,50,50); // only this square remains

Dieser Beitrag wurde unter HTML5 abgelegt und mit , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Eine Antwort auf Canvas Element – W3C Spezifikation

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert