HTML -Canvas-Grafiken
Das HTML-Element <canvas> wird zum Zeichnen von Grafiken auf einer Webseite verwendet.
Die Grafik links wurde mit <canvas> erstellt. Es zeigt vier Elemente: ein rotes Rechteck, ein Verlaufsrechteck, ein mehrfarbiges Rechteck und einen mehrfarbigen Text.
Was ist HTML Canvas?
Das HTML-Element <canvas> wird zum spontanen Zeichnen von Grafiken über JavaScript verwendet.
Das Element <canvas> ist nur ein Container für Grafiken. Sie müssen JavaScript verwenden, um die Grafiken tatsächlich zu zeichnen.
Canvas verfügt über mehrere Methoden zum Zeichnen von Pfaden, Kästchen, Kreisen, Text und zum Hinzufügen von Bildern.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Element <canvas> vollständig unterstützt.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Canvas-Beispiele
Eine Leinwand ist ein rechteckiger Bereich auf einer HTML-Seite. Standardmäßig hat eine Leinwand keinen Rahmen und keinen Inhalt.
Das Markup sieht so aus:
<canvas id="myCanvas" width="200" height="100"></canvas>
Hinweis: Geben Sie immer ein id-Attribut (auf das in einem Skript verwiesen wird) und eine width und height-Attribut, um die Größe der Leinwand zu definieren. Um einen Rahmen hinzuzufügen, verwenden Sie das Attribut style.
Hier ist ein Beispiel für eine einfache, leere Leinwand:
Beispiel
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;">
</canvas>
Try it Yourself »
JavaScript hinzufügen
Nachdem Sie den rechteckigen Leinwandbereich erstellt haben, müssen Sie ein JavaScript hinzufügen, um die Zeichnung auszuführen.
Hier sind einige Beispiele:
Zeichnen Sie eine Linie
Beispiel
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
Try it Yourself »
Zeichne einen Kreis
Beispiel
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
Try it Yourself »
Zeichne einen Text
Beispiel
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
Try it Yourself »
Strichtext
Beispiel
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
Try it Yourself »
Zeichnen Sie einen linearen Farbverlauf
Beispiel
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
Try it Yourself »
Zeichnen Sie einen kreisförmigen Farbverlauf
Beispiel
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
Try it Yourself »
Bild zeichnen
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
Try it Yourself »
HTML Canvas-Tutorial
Um mehr über <canvas> zu erfahren, lesen Sie bitte unser HTML Canvas-Tutorial.
