<canvas> ist ein HTML-Element, das mithilfe von Skripten (normalerweise js) gezeichnet werden kann.
<canvas> WebKit wurde erstmals von Apple eingeführt und im Dashboard und Safari von Mac OS X verwendet
Heutzutage wird es von allen gängigen Browsern unterstützt (IE9+, niedrigere Versionen müssen zur Unterstützung Explorer Canvas einführen)
1. Beginnen Sie mit dem Zeichnen (Rendering-Kontext)Das <canvas>-Element erstellt eine Leinwand mit fester Größe, auf der der Rendering-Kontext CanvasRenderContext2D zum Zeichnen und Verarbeiten des anzuzeigenden Inhalts verwendet werden kann.
Um auf der Leinwand zu zeichnen, müssen Sie zunächst den Rendering-Kontext CanvasRenderContext2D2d abrufen. (Dies bezieht sich auf 2D, nicht auf WebGL)
const canvas = document.getElementById('mycanvas'); const ctx = canvas.getContext('2d');ctx.fillStyle = 'pink';ctx.fillRect(10, 10, 300, 300);Beispiel
2. Eigenschaften von CanvasRenderContext2D:Sie können den Stil der Zeichnung festlegen, indem Sie die Eigenschaften des Kontexts festlegen.
Alle Eigenschaften sind wie folgt:
| Eigentum | Einführung |
|---|---|
| Leinwand | Canvas-Element |
| fillStyle | Die aktuelle Farbe, der aktuelle Modus oder der Farbverlauf, mit dem der Pfad gefüllt wird |
| Schriftart | Schriftstil |
| globalAlpha | Gibt die Deckkraft des auf der Leinwand gezeichneten Inhalts an |
| globalCompositeOperation | Legen Sie fest, wie eine Farbe mit bereits auf der Leinwand vorhandenen Farben kombiniert wird (Compositing). |
| lineCap | Gibt an, wie die Enden der Linie gezeichnet werden |
| lineDashOffset | Strichversatz einstellen |
| lineJoin | Geben Sie an, wie zwei Linien verbunden sind |
| Linienbreite | Gibt die Linienbreite für Pinseloperationen (Strichzeichnung) an |
| miterLimit | Wenn das lineJoin-Attribut „Mitre“ lautet, gibt dieses Attribut das maximale Verhältnis der diagonalen Verbindungslänge zur Linienbreite an. |
| Schattenunschärfe | Unschärfeeffektstufe |
| Schattenfarbe | Schattenfarbe |
| ShadowOffsetX | Horizontaler Versatzabstand des Schattens |
| ShadowOffsetY | Vertikaler Versatzabstand des Schattens |
| Strichstil | Farben, Modi und Verläufe für Pinselpfade (Zeichenpfade). |
| textAlign | Textausrichtung |
| textBaseline | Vertikale Textausrichtung |
Die Breite und Höhe des Canvas müssen mithilfe der Attributwerte width und height angegeben werden.
Wenn nicht angegeben, beträgt die Standardgröße der Leinwand 300 x 150
Die durch den Stil angegebene Breite und Höhe sind nur die Anzeigegröße des Canvas-Elements, nicht die Größe der Zeichenumgebung.
Leinwand {Breite: 1000 Pixel; Höhe: 600 Pixel; /canvas>...ctx.fillStyle = red;ctx.fillRect(10, 10, 100, 100); Beispiel für Breite und HöheWarum sind die Stile auf die gleiche Größe eingestellt, werden aber völlig unterschiedlich angezeigt?
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.