Dokumentation (canvas.quaese.de)
 

Schnittstellen/Objekte - CanvasRenderingContext2D

Es kann nur ein CanvasRenderingContext2D-Objekt in einem canvas geben, das über die Methode getContext referenziert wird.

Der 2D-Kontext repräsentiert eine karthesische Oberfläche, deren Ursprung (0,0) sich an der linken oberen Ecke befindet. Die x-Werte werden in die rechte Richtung erhöht, die y-Werte nach unten.

Attribute und Methoden

Canvas-Zustand

  • save - (Methode) Speichert einen Zustand des Kontextes auf dem Stack
  • restore - (Methode) Stellt den letzten Zustand vom Stack wieder her (existiert kein Zustand -> keine Veränderung)

Transformationen

  • scale - (Methode) Skaliert den Inhalt des Kontextes
  • rotate - (Methode) Drehung des Inhalts
  • translate - (Methode) Verschieben des Inhalts
  • transform - (Methode) multipliziert die aktuelle Transformationsmatrix (mit Parameterwerte)
  • setTransform - (Methode) setzt die aktuelle Transformationsmatrix (auf Parameterwerte)

Rechtecke

  • clearRect - (Methode) Löscht den Inhalt eines Rechtecks (beschrieben durch die Parameter)
  • fillRect - (Methode) Füllt den Inhalt eines Rechtecks (beschrieben durch die Parameter)
  • strokeRect - (Methode) Zeichnet die Umfanglinien eines Rechtecks (beschrieben durch die Parameter)

Pfad-Schnittstelle

  • beginPath - (Methode) Löscht die Liste aller Unterpfade (eines Kontextes)
  • closePath - (Methode) Schliesst einen Pfad
  • moveTo - (Methode) Erstellt einen neuen Unterpfad (Startpunkt aus Parametern)
  • lineTo - (Methode) Verbindet den Endpunkt eines bestehenen Unterpfads (aus der Liste des Kontextes) mit den übergebenen Koordinaten durch eine gerade Linie
  • quadraticCurveTo - (Methode) Verbindet den Endpunkt eines bestehenen Unterpfads (aus der Liste des Kontextes) mit den übergebenen Koordinaten durch eine quadratische Bezierkurve
  • bezierCurveTo - (Methode) Verbindet den Endpunkt eines bestehenen Unterpfads (aus der Liste des Kontextes) mit den übergebenen Koordinaten durch eine cubische Bezierkurve
  • arcTo - (Methode) Verbindet den Endpunkt eines bestehenen Unterpfads (aus der Liste des Kontextes) mit den übergebenen Koordinaten abhängig vom letzten Punkt des Unterpfads
  • rect - (Methode) Erstellt einen neuen geschlossenen Rechteck-Pfad
  • arc - (Methode) Zeichnet einen Bogen bezüglich der übergebenen Parameter
  • fill - (Methode) Füllt einen Pfad
  • stroke - (Methode) Zeichnet alle Linien eines Pfades
  • clip - (Methode) Erstellt einen neuen Pfad als Schnittmenge aus dem Clipping-Pfad und dem aktuellen Arbeitspfad
  • isPointInPath - (Methode) Prüft, ob ein Punkt innerhalb eines Pfades liegt

Farben und Styles

Linien-Methoden

  • lineWidth - (Attribut) setzt die Linienstärke
  • lineCap - (Attribut) legt die Enden einer Linie fest ("butt", "round", "square")
  • lineJoin - (Attribut) legt den Verbindungstyp zwischen zwei Linien fest ("round", "bevel", "miter")
  • miterLimit - (Attribut) maximal zulässige Gehrungslänge (= Quotient aus Gehrungslänge und Strichbreite)

Schatten

Verknüpfungen (Mischen)

  • globalAlpha - (Attribut) Transparenzwerte (float von 0.0 .. 1.0) für Formen und Bilder
  • globalCompositeOperation - (Attribut) Methode, mit der eine Form oder ein Bild in den Kontext gesetzt wird (addieren, multiplizieren usw.)

Bilder zeichnen

  • drawImage - (Methode) überladene Methode, die in ein Bild oder den Kontext zeichnet

Pixel-Manipulation

  • getImageData - (Methode) Liefert die Pixeldaten des durch die Parameter beschriebenen Rechtecks
  • putImageData - (Methode) Fügt Bildinformationen in den Kontext ein
 
Dokument zuletzt modifiziert: 26.07.2010, 21:44 Uhr
<canvas>-Dokumentation Ver. 0.1 | Quaese, Jan 2008 | Datenschutz | Sitemap