Dokumentation (canvas.quaese.de)
 

Schnittstellen/Objekte - <canvas>-Element

Allgemeines - <canvas>-Element

Das <canvas>-Element ist ein Objekt, dass mit Eigenschaften und Methoden ausgestattet ist. In den nachfolgenden Kapiteln sollen diese vorgestellt und beschrieben werden.

Attribute und Methoden

  • scale - (Methode) Skaliert den Inhalt des Kontextes
  • width - (Attribut) Breite des Canvas-Elements
  • height - (Attribut) Höhe des Canvas-Elements
  • getContext - (Methode) erstellt einen Kontext
  • toDataURL - (Methode) liefert einen data:-URL, der das Bild repräsentiert

width

Mittels dieser Eigenschaft kann die Breite des Elements definiert oder gelesen werden.

height

Mittels dieser Eigenschaft kann die Höhe des Elements definiert oder gelesen werden.

getContext

Die Methode getContext refernziert das CanvasRenderingContext2D-Objekt, über das viele weitere Attribute und Methoden zur Verfügung gestellt werden.

toDataURL

Die Methode liefert einen Base64-kodierten data:-URL-String zurück, der das Bild im <canvas>-Element repräsentiert.

Enthält der Canvas keine Pixel (z.B. eine der Dimensionen ist Null), muss die Methode die Zeichenkette "data:," zurückgeben. Hierbei handelt es sich um den kürzesten data:-URL, der einen leeren String in einer text/plain-Ressource darstellt.

Die Methode kann auf zwei unterschiedliche Varianten aufgerufen werden.

Variante 1:

  string toDataURL();

Ohne Parameter erstellt die Methode aus dem <canvas>-Element ein PNG-Bild.

Variante 2:

  string toDataURL(type, [args]);

Parameter

type

Dieser Parameter erwartet einen String, der das Format des zurückgegebenen data:-URL-Strings vorgibt. Mögliche Werte sind MIME-Typen ohne Parameter - zum Beispiel image/png, image/jgeg oder image/svg+xml. Es ist jedoch zu beachten, dass nicht alle Typen von allen Browsern unterstützt werden.

Vorgeschrieben ist für die Browser lediglich die Unterstützung des PNG-Formats. Wird ein Format angegeben, das durch den Browser nicht unterstützt wird, muss ein PNG zurückgegeben werden.

args (optional)

Weitere Argumente, die optional übergeben werden können. Siehe hierzu die Referenzen der jeweiligen Browserhersteller.

Beispiel

Ihr Browser unterstützt das canvas-Element leider nicht.

 
Dokument zuletzt modifiziert: 21.09.2008, 18:39 Uhr
<canvas>-Dokumentation Ver. 0.1 | Quaese, Jan 2008 | Datenschutz | Sitemap