HTML-Bildschirm
Die Funktionen von HTML canvas sind primitiver und eignen sich für Pixelverarbeitung, dynamische Rendern und Zeichnen großer Datenmengen
Was ist das HTML Canvas
HTML5 Das <canvas>-Tag wird verwendet, um Grafiken dynamisch durch Skript (normalerweise JavaScript) zu zeichnen.
Der <canvas>-Element hat jedoch keine eigene Zeichnungsfunktion (es ist nur ein Behälter für Grafiken)-Es muss ein Skript verwendet werden, um tatsächlich Grafiken zu zeichnen.
Diese getContext()-Methode gibt ein Objekt zurück, das Methoden und Eigenschaften zur Zeichnung auf dem Canvas bereitstellt.
Diese Referenz wird die Methode getContext("2d")-Objekt und die Methoden, die zur Zeichnung von Text, Linien, Rechtecken, Kreisen usw. auf dem Canvas verwendet werden können
Browser-Unterstützung
IEFirefoxOperaChromeSafari
Internet Explorer 9、Firefox、Opera、Chrome und Safari unterstützen die Attribute und Methoden des <canvas>-Tags.
Beachten Sie:Internet Explorer 8 und frühere IE-Versionen unterstützen das <canvas>-Element nicht.
Farbe, Stil und Schatten
| Property | Description |
| fillStyle | Setzen oder geben Sie die Farbe, das Verlauf oder das Muster für die Füllung zurück. |
| strokeStyle | Setzen oder geben Sie die Farbe, das Verlauf oder das Muster für den Strich zurück. |
| shadowColor | Setzen oder geben Sie die Farbe für Schatten zurück. |
| shadowBlur | Setzen oder geben Sie den Verwischungsebene für Schatten zurück. |
| shadowOffsetX | Setzen oder geben Sie die horizontale Entfernung von Schatten und Form zurück. |
| shadowOffsetY | Setzen oder geben Sie die vertikale Entfernung von Schatten und Form zurück. |
| Method | Description |
| createLinearGradient() | Erstellen Sie eine lineare Verlaufsänderung (verwendet auf dem Canvas-Inhalt). |
| createPattern() | Wiederholen Sie bestimmte Elemente in der angegebenen Richtung. |
| createRadialGradient() | Erstellen Sie einen Strahlenmuster/Kreisförmige Verlaufsänderung (verwendet auf dem Canvas-Inhalt). |
| addColorStop() | Legen Sie die Farben und die Positionsstopps des Farbverlaufs fest. |
Linienstil
| Property | Description |
| lineCap | Setzt oder gibt den Stil der Endpunkte der Linie zurück. |
| lineJoin | Setzt oder gibt den Typ der Ecke zurück, die bei der Kreuzung von Linien erstellt wird. |
| lineWidth | Setzt oder gibt die aktuelle Linienbreite zurück. |
| miterLimit | Setzt oder gibt die maximale Miterlänge zurück. |
Rechteck
| Method | Description |
| rect() | Erstellen Sie ein Rechteck. |
| fillRect() | Zeichnen Sie "gefülltes" Rechteck. |
| strokeRect() | Zeichnen Sie ein Rechteck (ohne Füllung). |
| clearRect() | Löschen Sie angegebene Pixel im gegebenen Rechteck. |
Pfad
| Method | Description |
| fill() | Füllen Sie die 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 auf die angegebene Position auf der Leinwand, 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 vom Punkt zum letzten angegebenen Punkt auf der Leinwand. |
| clip() | Schneiden Sie eine beliebige Form und Größe von Bereichen aus der ursprünglichen Leinwand aus. |
| quadraticCurveTo() | Erstellen Sie eine quadratische Bézier-Kurve. |
| bezierCurveTo() | Erstellen Sie eine dreifache Bézier-Kurve. |
| arc() | Erstellen Sie einen Bogen./Kurve (zur Erstellung von Kreisen oder Teilkreisen). |
| arcTo() | Erstellen Sie einen Bogen zwischen zwei Tangenten./Kurve |
| isPointInPath() | Gibt zurück, ob der angegebene Punkt im aktuellen Pfad liegt, sonst gibt er false zurück. |
Transformation
| Method | Description |
| scale() | Skalieren Sie die aktuelle Zeichnung auf größer oder kleiner. |
| rotate() | Drehen Sie die aktuelle Zeichnung. |
| translate() | Kartiert den Punkt (0,0) auf der Leinwand neu. |
| transform() | Ersetzt die aktuelle Transformation der Zeichnung. |
| setTransform() | Setzen Sie die aktuelle Transformation auf die Einheitsmatrix zurück und führen Sie dann transform() aus. |
Text
| Property | Description |
| font | Setzt oder gibt die aktuellen Schriftart-Eigenschaften zurück. |
| textAlign | Setzt oder gibt die aktuelle Ausrichtung des Textinhalts zurück. |
| textBaseline | Setzt oder gibt die aktuelle Textgrundlinie zurück, die beim Zeichnen von Text verwendet wird. |
| Method | Description |
| fillText() | Zeichnen Sie "gefüllten" Text auf die Leinwand. |
| strokeText() | Zeichnen Sie Text auf die Leinwand (ohne Füllung). |
| measureText() | Gibt ein Objekt zurück, das die Breite der angegebenen Textzeichen enthält. |
Bildzeichnung
| Method | Description |
| drawImage() | Zeichnen Sie ein Bild, eine Leinwand oder ein Video auf die Leinwand. |
Pixel operations
| Property | Description |
| width | Return the width of the ImageData object. |
| height | Return the height of the ImageData object. |
| data | Return an object that contains the image data of the specified ImageData object. |
| Method | Description |
| createImageData() | Create a new, empty ImageData object. |
| getImageData() | Return an ImageData object that contains the pixel data for the specified rectangle on the canvas. |
| putImageData() | Put the image data (from the specified ImageData object) back onto the canvas. |
Composition
| Property | Description |
| globalAlpha | Set or return the current alpha or transparency value for drawing. |
| globalCompositeOperation | Set or return how a new image is drawn onto an existing image. |
Other
| Method | Description |
| save() | Save the current environment state. |
| restore() | Return the previously saved path state and properties. |
| createEvent() | |
| getContext() | |
| toDataURL() | |