Wenn Sie diesen Text sehen, Ihr Browser
verfügt nicht über HTML5-Canvas-Unterstützung.
„Das Attribut „id“ ist nicht verhandelbar. Es fungiert als Ankerpunkt für Ihr JavaScript. Sie müssen auf dieselbe ID verweisen, um das Element abzurufen. Der Fallback-Text im Tag wird nur angezeigt, wenn der Browser keine Unterstützung bietet. Das ist jetzt selten. Aber es ist eine gute Übung.#### 2. Der JavaScript-KontextHTML allein bringt nichts. Sie benötigen JavaScript, um etwas zu zeichnen. Das Schlüsselkonzept hier ist der **Kontext**. Stellen Sie sich die Leinwand als eine physische Tafel und den Kontext als die Werkzeuge vor, die Sie darauf verwenden. Am häufigsten verwenden Sie den 2D-Kontext.„Javascript
Funktion drawRectangle() {
var targetCanvas = document.getElementById(“sampleCanvas”);
var rectContext = targetCanvas.getContext(“2d”);rectContext.fillStyle = “blue”;
rectContext.fillRect(50, 25, 150, 100);
}
„Dieses Code-Snippet bewirkt drei Dinge. Zuerst wird das Canvas-Element erfasst. Zweitens wird nach dem 2D-Zeichnungskontext gefragt. Ohne dieses Kontextobjekt können Sie nicht zeichnen. Drittens führt es den Zeichenbefehl aus.Die Eigenschaft „fillStyle“ legt die Farbe fest. HTML akzeptiert benannte Farben wie „Blau“, Hex-Codes oder Farbverläufe. In der Funktion „fillRect“ findet die eigentliche Arbeit statt. Es braucht vier Zahlen:1. **X-Versatz:** Horizontaler Abstand von der oberen linken Ecke (0,0).
2. **Y-Versatz:** Vertikaler Abstand von der oberen linken Ecke.
3. **Breite:** Wie breit das Rechteck ist.
4. **Höhe:** Wie hoch das Rechteck ist.Im obigen Beispiel beginnt das Rechteck 50 Pixel rechts und 25 Pixel unten. Es ist 150 Pixel breit und 100 Pixel hoch. Das Ergebnis ist ein durchgezogenes blaues Kästchen. Sie können mehrere Formen übereinander legen. Sie können Stile im Handumdrehen ändern. Der Kontext merkt sich diese Zustände, bis Sie sie ändern.#### 3. Auslösen der AktionEs reicht nicht aus, die Form zu definieren. Sie müssen die Funktion aufrufen. Hierzu gibt es im Wesentlichen zwei Möglichkeiten.**Rendering zur Ladezeit.** Wenn Sie möchten, dass die Grafiken sofort angezeigt werden, rufen Sie die Funktion auf, wenn die Seite geladen wird. Dies funktioniert für statische Hintergründe oder anfängliche UI-Elemente.**Benutzerinteraktion.** Wenn die Zeichnung von Benutzereingaben abhängt, binden Sie sie an ein Ereignis. Ein Tastenklick ist der einfachste Ansatz.
