Canvas-Zeichnung
JavaScript wird verwendet, um auf der Canvas zu zeichnen. Dies geschieht Schritt für Schritt.
1. Canvas-Element finden
Um das Canvas-Element zu finden, verwenden Sie die HTML-DOM-Methode: getElementById():
Canvas-Zeichnung
var canvas=document.getElementById("canvas");2. Zeichenobjekt erstellen
Verwenden Sie die getContext()-Methode, um einen Zeichenkontext zu erhalten, der Eigenschaften und Methoden bereitstellt:
Canvas-Zeichnung
var ctx = canvas.getContext("2d");3. Auf das Canvas-Element zeichnen
Jetzt können Sie auf der Canvas zeichnen. Die Eigenschaft fillStyle kann eine CSS-Farbe, ein Muster oder ein Farbverlauf sein.
Canvas-Zeichnung
ctx.fillStyle = "#1c87c9";Sie können auch die fillRect(x, y, width, height)-Methode verwenden, um ein gefülltes Rechteck auf der Canvas zu zeichnen. Die Parameter geben die x- und y-Koordinaten der oberen linken Ecke an, gefolgt von Breite und Höhe:
Canvas-Zeichnung
ctx.fillRect(0, 0, 230, 130);Beispiel für das HTML <canvas>-Tag:
Beispiel für das HTML <canvas>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="canvas" width="250" height="150" style="border:1px solid #dddddd;">
The canvas tag is not supported by your browser.
</canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#1c87c9";
ctx.fillRect(0, 0, 230, 130)
</script>
</body>
</html>Praxis
Welche Elemente werden benötigt, um auf einer HTML-Canvas zu zeichnen?