Dokumentation (canvas.quaese.de)

Allgemeines - Rendering Context

Nachdem ein <canvas>-Element erstellt wurde, steht eine leere Zeichenoberfläche zur Verfügung - der songenannte (Rendering) Context. Mit Hilfe eines Scripts kann auf den Context zugegriffen und darin gezeichnet werden. Dafür steht die Methode getContext des DOM zur Verfügung.

getContext

getContext(type)

Mit Hilfe von getContext erhält man Zugriff auf den Context und seine Zeichnen- und Bearbeitungfunktionen.

Parameter

type

Spezifiziert den Typ des Kontextes - derzeit wird nur der Typ "2d" unterstützt. Durch Angabe dieses Typs wird der Browser (UA) veranlasst, eine Referenz auf ein CanvasRenderingContext2D-Objekt zurück zu liefern. Damit hat das Script Zugriff auf die Methoden und Attribute (Eigenschaften) des Objekts.

Beispiel

var objCanvas = document.getElementById('canvas_id');
var objContext = objCanvas.getContext('2d');

Zunächst wird eine Referenz auf ein canvas-Element erstellt (getElementById). Im der zweiten Anweisung wird ein 2D-Rendering-Context generiert und seine Referenz an objContext übergeben.

Attribute und Methoden

Canvas-Zustand

void save(); - (Methode) Speichert einen Zustand des Kontextes auf dem Stack
void 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

strokeStyle - (Attribut) Farbe und/oder Style einer Linie
fillStyle - (Attribut) Farbe und/oder Style einer Füllung
createLinearGradient - (Methode) erstellt einen linearen Farbverlauf
createRadialGradient - (Methode) erstellt einen radialen Farbverlauf
createPattern - (Methode) erstellt ein Füllmuster in einem übergebenen Bild
createPattern - (Methode) erstellt ein Fullmuster im Canvas-Element

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

shadowOffsetX - (Attribut) horizontaler Abstand des Schattens
shadowOffsetY - (Attribut) vertikaler Abstand des Schattens
shadowBlur -(Attribut) Unschärfe des Schattens
shadowColor - (Attribut) Schattenfarbe

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