HTML-Canvas- Zeichnung
Zeichnen Sie mit JavaScript auf der Leinwand
Alle Zeichnungen auf der HTML-Leinwand müssen mit JavaScript erfolgen:
Beispiel
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Schritt 1: Finden Sie das Canvas-Element
Zuerst müssen Sie das Element <canvas> finden.
Dies geschieht mit der HTML-DOM-Methode getElementById():
var canvas = document.getElementById("myCanvas");
Schritt 2: Erstellen Sie ein Zeichnungsobjekt
Zweitens benötigen Sie ein Zeichenobjekt für die Leinwand.
getContext() ist ein eingebautes HTML-Objekt mit Eigenschaften und Methoden zum Zeichnen:
var ctx = canvas.getContext("2d");
Schritt 3: Zeichnen Sie auf der Leinwand
Schließlich können Sie auf der Leinwand zeichnen.
Legen Sie den Füllstil des Zeichenobjekts auf die Farbe Rot fest:
ctx.fillStyle = "#FF0000";
Die Eigenschaft fillStyle kann eine CSS-Farbe, ein Farbverlauf oder ein Muster sein. Der StandardfillStyle ist schwarz.
Die Methode fillRect( x,y,width,height ) zeichnet ein mit dem Füllstil gefülltes Rechteck auf der Leinwand:
ctx.fillRect(0, 0, 150, 75);