HTML5 <canvas>Referenzhandbuch
Beschreibung
HTML5 <canvas> 标签用于绘制图像（通常通过脚本）。
Das <canvas>-Element selbst hat jedoch keine Zeichenfähigkeit (es ist lediglich ein Container für Grafiken) - Sie müssen Skripte verwenden, um die eigentliche Zeichenaufgabe auszuführen.
Die Methode getContext() gibt ein Objekt zurück, das Methoden und Eigenschaften zum Zeichnen auf dem Canvas bereitstellt.
Dieses Handbuch bietet die vollständigen Eigenschaften und Methoden des getContext("2d")-Objekts, mit denen Text, Linien, Rechtecke, Kreise und mehr auf das Canvas gezeichnet werden können.
Browser-Unterstützung
Internet Explorer 9, Firefox, Opera, Chrome und Safari unterstützen die Attribute und Methoden des <canvas>-Tags.
Hinweis:Internet Explorer 8 und frühere IE-Versionen unterstützen das <canvas>-Element nicht.
Farben, Stile und Schatten
| Eigenschaften |
Beschreibung |
| fillStyle |
Legt die Farbe, den Farbverlauf oder das Muster fest, die zum Füllen von Zeichnungen verwendet werden, oder gibt sie zurück. |
| strokeStyle |
Legt die Farbe, den Farbverlauf oder das Muster fest, die für Striche verwendet werden, oder gibt sie zurück. |
| shadowColor |
Legt die für Schatten verwendete Farbe fest oder gibt sie zurück. |
| shadowBlur |
Legt den für Schatten verwendeten Unschärfegrad fest oder gibt ihn zurück. |
| shadowOffsetX |
Legt den horizontalen Abstand zwischen dem Schatten und der Form fest oder gibt ihn zurück. |
| shadowOffsetY |
Legt den vertikalen Abstand zwischen dem Schatten und der Form fest oder gibt ihn zurück. |
| Methoden |
Beschreibung |
| createLinearGradient() |
Erstellt einen linearen Farbverlauf (wird auf den Canvas-Inhalt angewendet). |
| createPattern() |
Wiederholt das angegebene Element in der angegebenen Richtung. |
| createRadialGradient() |
Erstellt einen radialen/kreisförmigen Farbverlauf (wird auf den Canvas-Inhalt angewendet). |
| addColorStop() |
Gibt die Farben und Stopppositionen im Farbverlaufsobjekt an. |
Linienstile
| Eigenschaften |
Beschreibung |
| lineCap |
Legt den Stil der Linienenden fest oder gibt ihn zurück. |
| lineJoin |
Legt den Typ der Ecke fest, die beim Schnittpunkt zweier Linien entsteht, oder gibt ihn zurück. |
| lineWidth |
Legt die aktuelle Linienbreite fest oder gibt sie zurück. |
| miterLimit |
Legt die maximale Gehrungslänge fest oder gibt sie zurück. |
Rechtecke
| Methoden |
Beschreibung |
| rect() |
Erstellt ein Rechteck. |
| fillRect() |
Zeichnet ein „gefülltes“ Rechteck |
| strokeRect() |
Zeichnet ein Rechteck (ohne Füllung). |
| clearRect() |
Löscht die angegebenen Pixel innerhalb eines gegebenen Rechtecks. |
Pfade
| Methoden |
Beschreibung |
| fill() |
Füllt die aktuelle Zeichnung (Pfad). |
| stroke() |
Zeichnet den definierten Pfad. |
| beginPath() |
Startet einen Pfad oder setzt den aktuellen Pfad zurück. |
| moveTo() |
Verschiebt den Pfad zum angegebenen Punkt auf dem Canvas, ohne eine Linie zu ziehen. |
| closePath() |
Erstellt einen Pfad vom aktuellen Punkt zurück zum Startpunkt. |
| lineTo() |
Fügt einen neuen Punkt hinzu und erstellt dann eine Linie auf dem Canvas von diesem Punkt zum zuletzt angegebenen Punkt. |
| clip() |
Schneidet einen Bereich beliebiger Form und Größe aus dem ursprünglichen Canvas aus. |
| quadraticCurveTo() |
Erstellt eine quadratische Bézier-Kurve. |
| bezierCurveTo() |
Erstellt eine kubische Bézier-Kurve. |
| arc() |
Erstellt einen Bogen/eine Kurve (wird zum Erstellen von Kreisen oder Teilkreisen verwendet). |
| arcTo() |
Erstellt einen Bogen/eine Kurve zwischen zwei Tangenten. |
| isPointInPath() |
Gibt true zurück, wenn der angegebene Punkt im aktuellen Pfad liegt, andernfalls false. |
Transformiert
| Methoden |
Beschreibung |
| scale() |
Skaliert die aktuelle Zeichnung, um sie größer oder kleiner zu machen. |
| rotate() |
Dreht die aktuelle Zeichnung. |
| translate() |
Ordnet die (0,0)-Position auf dem Canvas neu zu. |
| transform() |
Ersetzt die aktuelle Transformationsmatrix der Zeichnung. |
| setTransform() |
Setzt die aktuelle Transformation auf die Identitätsmatrix zurück. Führt dann transform() aus. |
Text
| Eigenschaften |
Beschreibung |
| font |
Legt die aktuelle Schriftart-Eigenschaft des Textinhalts fest oder gibt sie zurück. |
| textAlign |
Legt die aktuelle Ausrichtung des Textinhalts fest oder gibt sie zurück. |
| textBaseline |
Legt die aktuelle Textgrundlinie fest oder gibt sie zurück, die beim Zeichnen von Text verwendet wird. |
| Methoden |
Beschreibung |
| fillText() |
Zeichnet "gefüllten" Text auf das Canvas. |
| strokeText() |
Zeichnet Text auf die Zeichenfläche (ohne Füllung). |
| measureText() |
Gibt ein Objekt zurück, das die Breite des angegebenen Textes enthält. |
Bildzeichnung
| Methoden |
Beschreibung |
| drawImage() |
Zeichnet ein Bild, ein Canvas oder ein Video auf das Canvas. |
Pixel-Operationen
| Eigenschaften |
Beschreibung |
| width |
Gibt die Breite des ImageData-Objekts zurück. |
| height |
Gibt die Höhe des ImageData-Objekts zurück. |
| data |
Gibt ein Objekt zurück, das die Bilddaten des angegebenen ImageData-Objekts enthält. |
| Methoden |
Beschreibung |
| createImageData() |
Erstellt ein neues, leeres ImageData-Objekt. |
| getImageData() |
Gibt ein ImageData-Objekt zurück, das Pixeldaten aus dem angegebenen Rechteck auf dem Canvas kopiert. |
| putImageData() |
Schreibt die Bilddaten (aus dem angegebenen ImageData-Objekt) zurück auf die Zeichenfläche. |
Komposition
| Eigenschaften |
Beschreibung |
| globalAlpha |
Legt den aktuellen Alpha- oder Transparenzwert der Zeichnung fest oder gibt ihn zurück. |
| globalCompositeOperation |
Legt fest oder gibt zurück, wie neue Bilder auf vorhandene Bilder gezeichnet werden. |
Sonstiges
| Methoden |
Beschreibung |
| save() |
Speichert den Zustand des aktuellen Kontexts. |
| restore() |
Gibt den zuvor gespeicherten Pfadzustand und die Eigenschaften zurück. |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
Andere Erweiterungen