HTML-Canvas-Referenzhandbuch
HTML-Canvas-Referenzhandbuch
Der HTML <canvas>-Tag wird verwendet, um Grafiken dynamisch mit Skripten (normalerweise JavaScript) zu zeichnen.
Für weitere Informationen zum <canvas> lesen Sie bitte unser HTML Canvas-Tutorial.
Farbe, Stil und Schatten
| Eigenschaft |
Beschreibung |
| fillStyle |
Setzen oder geben Sie die Farbe, den Farbverlauf oder das Muster der Füllung an |
| strokeStyle |
Setzen oder geben Sie die Farbe, den Farbverlauf oder das Muster des Strichs an |
| shadowColor |
Setzen oder geben Sie die Farbe des Schattens an |
| shadowBlur |
Setzen oder geben Sie das Verzerrungsniveau des Schattens an |
| shadowOffsetX |
Setzen oder geben Sie die horizontale Entfernung der Schattenform an |
| shadowOffsetY |
Setzen oder geben Sie die vertikale Entfernung der Schattenform an |
| Methode |
Beschreibung |
| createLinearGradient() |
Erstellen Sie einen linearen Farbverlauf (verwendet in Canvas-Inhalten) |
| createPattern() |
Wiederholen Sie die angegebenen Elemente in der angegebenen Richtung |
| createRadialGradient() |
Erstellen Sie einen radialen/zirkulären Farbverlauf (verwendet in Canvas-Inhalten) |
| addColorStop() |
Definieren Sie die Farben und die Positionsabstände im Farbverlauf des Objekts |
Linienstil
| Eigenschaft |
Beschreibung |
| lineCap |
Setzen oder geben Sie den Stil der Endpunkte der Linie an |
| lineJoin |
Setzen oder geben Sie den Typ der Ecke an, die beim Kreuzen von Linien erstellt wird |
| lineWidth |
Setzen oder geben Sie die aktuelle Linienbreite an |
| miterLimit |
Setzen oder geben Sie die maximale Kantenlänge der Kante an |
Rechteck
| Methode |
Beschreibung |
| rect() |
Erstellen Sie ein Rechteck |
| fillRect() |
Zeichnen Sie ein 'gefülltes' Rechteck |
| strokeRect() |
Zeichnen Sie ein Rechteck (ohne Füllung) |
| clearRect() |
Löschen Sie spezifische Pixel im angegebenen Rechteck |
Pfad
| Methode |
Beschreibung |
| fill() |
Füllen Sie das aktuelle Zeichnung (Pfad) |
| stroke() |
Zeichnen Sie den definierten Pfad |
| beginPath() |
Beginnen Sie einen Pfad oder setzen Sie den aktuellen Pfad zurück |
| moveTo() |
Bewegen Sie den Pfad zum angegebenen Punkt auf dem Bildschirm, ohne eine Linie zu erstellen |
| closePath() |
Erstellen Sie einen Pfad, der vom aktuellen Punkt zurück zum Ausgangspunkt führt |
| lineTo() |
Fügen Sie einen neuen Punkt hinzu und erstellen Sie eine Linie auf dem Bildschirm vom Punkt zum angegebenen Punkt |
| clip() |
Schneiden Sie eine beliebige Fläche und Größe vom ursprünglichen Bildschirm aus |
| quadraticCurveTo() |
Erstellung einer quadratischen Bézierkurve |
| bezierCurveTo() |
Erstellung einer kubischen Bézierkurve |
| arc() |
Erstellung einer Bogenkurve (zur Erstellung von Kreisen oder Teilkreisen) |
| arcTo() |
Erstellung einer Bogenkurve zwischen zwei Tangenten |
| isPointInPath() |
Gibt true zurück, wenn der angegebene Punkt im aktuellen Pfad liegt, sonst false |
Transformation
| Methode |
Beschreibung |
| scale() |
Vergrößern oder Verkleinern der aktuellen Zeichnung |
| rotate() |
Drehen der aktuellen Zeichnung |
| translate() |
Neu zuteilen der Position (0,0) auf der Leinwand |
| transform() |
Ersetzen der aktuellen Transformationsmatrix der Zeichnung |
| setTransform() |
Setzen des aktuellen Transformationszustands auf die Einheitsmatrix. Führen Sie dann transform() aus |
Text
| Eigenschaft |
Beschreibung |
| font |
Einstellung oder Rückgabe der aktuellen Zeichensatzattribute des Textinhalts |
| textAlign |
Einstellung oder Rückgabe der aktuellen Ausrichtung des Textinhalts |
| textBaseline |
Einstellung oder Rückgabe der aktuellen Textgrundlinie, die beim Zeichnen von Text verwendet wird |
| Methode |
Beschreibung |
| fillText() |
Text auf die Leinwand zeichnen, der 'gefüllt' ist |
| strokeText() |
Text auf die Leinwand zeichnen (ohne Füllung) |
| measureText() |
Rückgabe eines Objekts, das die Breite der angegebenen Textlänge enthält |
Bildeinzeichnung
| Methode |
Beschreibung |
| drawImage() |
Zeichnen von Bildern, Leinwänden oder Videos auf die Leinwand |
Pixeloperationen
| Eigenschaft |
Beschreibung |
| width |
Rückgabe der Breite des ImageData-Objekts |
| height |
Rückgabe der Höhe des ImageData-Objekts |
| data |
Rückgabe eines Objekts, das die Bilddaten des angegebenen ImageData-Objekts enthält |
| Methode |
Beschreibung |
| createImageData() |
Erstellung eines neuen, leeren ImageData-Objekts |
| getImageData() |
Rückgabe eines ImageData-Objekts, das die Pixeldaten der angegebenen Rechteckfläche auf der Leinwand kopiert |
| putImageData() |
Setzen der Bilddaten (von einem bestimmten ImageData-Objekt) zurück auf die Leinwand |
Synthese
| Eigenschaft |
Beschreibung |
| globalAlpha |
Einstellung oder Rückgabe des aktuellen alpha oder Transparenzwerts der Zeichnung |
| globalCompositeOperation |
Einstellung oder Rückgabe, wie eine neue Image gezeichnet wird, auf eine bestehende Image |
Andere
| Methode |
Beschreibung |
| save() |
Speicherung des aktuellen Umgebungsstatus |
| restore() |
Rückgabe des vorherigen gespeicherten Pfadstatus und der Attribute |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
