Dokumentation (canvas.quaese.de)

<canvas> - Pfade (komplexe Formen)

Der Kontext enthält immer einen aktuellen Pfad (Arbeitspfad). Es existiert zu jeder Zeit immer nur ein solcher Pfad, der nicht Teil des Zeichenzustands ist. D.h. beim Sichern mit save ist der Arbeitspfad nicht mit betroffen.

Ein Pfad besitzt eine Liste mit Null oder mehr Subpfaden (Unterpfaden). Jeder Subpfad besteht aus einer Liste mit einem oder mehr Punkten, die durch gerade Linien oder Kurven miteinander verbunden sind und einem Flag, das anzeigt, ob der Unterpfad geschlossen ist oder nicht. Ein geschlossener Subpfad zeichnet sich dadurch aus, dass der letzte Punkt mit dem ersten durch eine gerade Linie verbunden ist oder beide Punkte die gleichen Koordinaten besitzen.

Subpfade mit weniger als zwei Punkten werden beim Zeichnen des Pfads ignoriert.

Prizipielle Vorgehensweise beim Zeichnen komplexer Formen

Im ersten Schritt wird die Methode beginPath aufgerufen. Das hat zur Folge, dass die Liste der Unterpfade zurückgesetzt wird und das Zeichnen einer neuen Form begonnen werden kann.

Als zweites kann über die entsprechenden Methoden der Pfad konstruiert werden, der die gewünschte Form beschreibt.

Der dritte Schritt ist optional. Wurde der Pfad bisher noch nicht geschlossen, so wird dies durch die Methode closePath erreicht.

Zum Abschluss wird der Pfad gezeichnet. Dazu stehen Methoden wie stroke oder fill zur Verfügung.

Attribute und Methoden

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

Beispiel

function drawIt(){
  var objCanvas = document.getElementById("canvas_id");
  // Falls das Objekt unterstützt wird
  if(objCanvas.getContext){
    // Kontext
    var objContext = objCanvas.getContext('2d');

    // Neuen Pfad beginnen
    objContext.beginPath();
    // Startposition festlegen
    objContext.moveTo(30, 10);
    // Trapez beschreiben
    objContext.lineTo(130, 10);
    objContext.lineTo(110, 90);
    objContext.lineTo(10, 90);
    objContext.lineTo(30, 10);

    objContext.fillStyle = "#a00";
    objContext.strokeStyle = "#600";

    objContext.fill();
    objContext.stroke();
  }else{
    // Sonstiger Code
  }
}

Erläuterung

Zu Beginn wird mit Hilfe der Methode beginPath der Arbeitspfad zurückgesetzt. Anschliessend wird mit moveTo die Startkoordinate festgelegt. Mit der Methode lineTo wird durch die übergebenen Parameter ein Trapez beschrieben, das zum Schluss mit fill und stroke eine Füllung und Kontur erhält.

<canvas> - Pfade (komplexe Formen)

Prizipielle Vorgehensweise beim Zeichnen komplexer Formen

Attribute und Methoden

Beispiel

Erläuterung

Anzeige