HTML-Canvas-Zeichnen
- Vorherige Seite Canvas-Einführung
- Nächste Seite Canvas-Koordinaten
Zeichnen auf dem Canvas mit JavaScript
Alle Zeichnungen auf dem HTML-Canvas müssen mit JavaScript durchgeführt werden:
Beispiel
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Schritt 1: Finden Sie das Canvas-Element
Zunächst müssen Sie das <canvas>-Element finden.
Dies wird durch die Verwendung der HTML DOM-Methode getElementById() erreicht:
const canvas = document.getElementById("myCanvas");
Schritt 2: Erstellen Sie das Zeichnungsobjekt
Zweitens benötigen Sie ein Zeichnungsobjekt für das Canvas.
getContext() ist ein eingebauter HTML-Objekt, das Attribute und Methoden für das Zeichnen bereitstellt:
const ctx = canvas.getContext("2d");
Schritt 3: Zeichnen auf dem Canvas
Schließlich können Sie auf dem Canvas zeichnen.
Setzen Sie den Füllstil des Zeichnungsobjekts auf rot:
ctx.fillStyle = "#FF0000";
Die Eigenschaft fillStyle kann CSS-Farben, Verläufe oder Mustern sein. Die Standardfüllfarbe ist schwarz.
Die Methode fillRect(x,y,width,height) zeichnet auf dem Canvas ein Rechteck und füllt es mit einer Füllfarbe aus:
ctx.fillRect(0, 0, 150, 75);
Weitere Informationen:
- Vorherige Seite Canvas-Einführung
- Nächste Seite Canvas-Koordinaten
