Canvas Object
Das Canvas-Objekt ist neu in HTML5.
Das HTML5 <canvas> -Tag wird verwendet , um Grafiken zu zeichnen, on the fly, mit JavaScript.
Greifen Sie auf eine Leinwand Object
Sie können einen Zugriff auf <canvas> Element unter Verwendung von getElementById() :
Erstellen Sie ein Canvas-Objekt
Sie können einen erstellen <canvas> , indem Sie das Element document. createElement() document. createElement() Methode:
Hinweis: Das <canvas> Element hat keine Zeichnung Fähigkeiten seines eigenen (es ist nur ein Container für Grafiken) - Sie einen Skript tatsächlich verwenden müssen , um die Grafik zu ziehen.
Die getContext() Methode gibt ein Objekt , das zum Zeichnen auf der Leinwand Methoden und Eigenschaften zur Verfügung stellt.
Diese Referenz wird die Eigenschaften und Methoden der Abdeckung getContext("2d") Objekts, das verwendet werden kann , Text, Linien, Kästen, Kreise zu zeichnen, und mehr - auf der Leinwand.
Farben, Stile und Schatten
| Eigentum | Beschreibung |
|---|
| fillStyle | Setzt oder gibt die Farbe, Farbverlauf oder ein Muster verwendet, um die Zeichnung zu füllen |
| strokeStyle | Setzt oder gibt die Farbe, Farbverlauf oder ein Muster für Anschläge verwendet |
| shadowColor | Setzt oder gibt die Farbe für Schatten verwenden |
| shadowBlur | Setzt oder sendet die Unschärfe Ebene für Schatten |
| shadowOffsetX | Setzt oder gibt den horizontalen Abstand des Schattens von der Form |
| shadowOffsetY | Setzt oder gibt den vertikalen Abstand des Schattens von der Form |
| Methode | Beschreibung |
|---|
|
createLinearGradient() | Erzeugt wird ein linearer Gradient (to use on canvas content) |
| createPattern() | Wiederholt ein angegebenes Element in der angegebenen Richtung |
| createRadialGradient() | Erzeugt eine radial / kreisförmigen Gradienten (to use on canvas content) |
| addColorStop() | Gibt die Farben und die Positionen in einem Gradienten Objekt anhalten |
Linienstile
| Eigentum | Beschreibung |
|---|
| lineCap | Setzt oder gibt den Stil der Endkappen für eine Linie |
| lineJoin | Setzt oder gibt den Typ der Ecke erstellt, wenn zwei Linien treffen |
| lineWidth | Setzt oder liefert die aktuelle Linienbreite |
| miterLimit | Setzt oder gibt die maximale Gehrung Länge |
Rectangles
| Methode | Beschreibung |
|---|
| rect() | Erstellt ein Rechteck |
| fillRect() | Zeichnet ein "filled" Rechteck |
| strokeRect() | Zeichnet ein Rechteck (no fill) |
| clearRect() | Löscht die spezifizierten Pixel innerhalb eines gegebenen Rechtecks |
Paths
| Methode | Beschreibung |
|---|
| fill() | Füllt die aktuelle Zeichnung (path) |
| stroke() | Tatsächlich zieht der Weg von Ihnen definierten |
| beginPath() | Beginnt ein Pfad oder setzt den Stromweg |
| moveTo() | Verschiebt den Pfad zu dem festgelegten Punkt in der Leinwand, ohne eine Linie der Schaffung |
| closePath() | Schaff einen Pfad vom aktuellen Punkt zurück zum Ausgangspunkt |
| lineTo() | Fügt einen neuen Punkt und erzeugt von diesem Punkt bis zum letzten angegebenen Punkt in der Leinwand eine Linie |
| clip() | Clips eine Region von jeder Form und Größe von der ursprünglichen Leinwand |
| quadraticCurveTo() | Erstellt eine quadratische Bézierkurve |
| bezierCurveTo() | Erstellt eine kubische Bezier-Kurve |
| arc() | Erzeugt einen Bogen / Kurve (used to create circles, or parts of circles) |
| arcTo() | Erzeugt einen Bogen / Kurve zwischen zwei Tangenten |
| isPointInPath() | Gibt true zurück, wenn der angegebene Punkt im Strompfad ist, andernfalls false |
Transformations
| Methode | Beschreibung |
|---|
| scale() | Scales die aktuelle Zeichnung größer oder kleiner |
| rotate() | Dreht die aktuelle Zeichnung |
| translate() | Ordnet die (0,0) Position auf der Leinwand |
| transform() | Ersetzt die aktuelle Transformationsmatrix für die Zeichnung |
| setTransform() | Setzt der Strom an die Identitätsmatrix zu transformieren. Dann läuft transform() |
Text
| Eigentum | Beschreibung |
|---|
| font | Setzt oder liefert die aktuellen Schrifteigenschaften für Textinhalt |
| textAlign | Setzt oder liefert die aktuelle Ausrichtung für Textinhalt |
| textBaseline | Setzt oder liefert die aktuelle Textgrundlinie verwendet wird, wenn Text Zeichnung |
| Methode | Beschreibung |
|---|
| fillText() | Unentschieden "filled" Text auf der Leinwand |
| strokeText() | Zeichnet Text auf der Leinwand (no fill) |
| measureText() | Gibt ein Objekt, das die Breite des angegebenen Text enthält |
image Zeichnung
| Methode | Beschreibung |
|---|
| drawImage() | Zeichnet ein Bild, Leinwand oder Video auf die Leinwand |
Pixel-Manipulation
| Eigentum | Beschreibung |
|---|
| width | Gibt die Breite eines Objekts Imagedata |
| height | Gibt die Höhe eines Objekts Imagedata |
| data | Gibt ein Objekt, das Bilddaten eines bestimmten Imagedata-Objekt enthält |
| Methode | Beschreibung |
|---|
| createImageData() | Erstellt ein neues, leeres Objekt Imagedata |
| getImageData() | Gibt ein Imagedata-Objekt, das kopiert die Pixeldaten für das angegebene Rechteck auf einer Leinwand |
| putImageData() | Setzt die Bilddaten (from a specified ImageData object) zurück auf die Leinwand |
Compositing
| Eigentum | Beschreibung |
|---|
| globalAlpha | Setzt oder gibt den aktuellen Alpha- oder Transparenzwert der Zeichnung |
| globalCompositeOperation | Setzt oder sendet, wie ein neues Bild gezeichnet wird auf ein vorhandenes Bild |
Andere
| Methode | Beschreibung |
|---|
| save() | Speichert den Zustand des aktuellen Kontext |
| restore() | Gibt zuvor gespeicherten Pfadzustand und Attribute |
| createEvent() | |
| getContext() | |
| toDataURL() | |
Standardeigenschaften und Events
Das Leinwand - Objekt unterstützt auch die Standard - Eigenschaften und Ereignisse .
Verwandte Seiten
HTML - Tutorial: HTML5 Canvas
HTML - Referenz: HTML <canvas> -Tag