HTML -Canvas-Grafiken
Das HTML <canvas>-Element wird verwendet, um Grafiken auf einer Webseite zu zeichnen.
Die Grafik links wird mit erstellt <canvas>. Es zeigt vier Elemente: ein rotes Rechteck, ein Verlaufsrechteck, ein mehrfarbiges Rechteck und einen mehrfarbigen Text.
Was ist HTML-Canvas?
Das HTML <canvas>-Element wird verwendet, um Grafiken im Handumdrehen über JavaScript zu zeichnen.
Das <canvas>Element 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
<canvas>Element vollständig unterstützt.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Canvas-Beispiele
Ein Canvas ist ein rechteckiger Bereich auf einer HTML-Seite. Standardmäßig hat eine Leinwand keinen Rand und keinen Inhalt.
Das Markup sieht so aus:
<canvas id="myCanvas" width="200" height="100"></canvas>
Hinweis: Geben Sie immer ein idAttribut (auf das in einem Skript verwiesen wird) und ein widthand - heightAttribut an, um die Größe der Leinwand zu definieren. Um einen Rahmen hinzuzufügen, verwenden Sie das styleAttribut.
Hier ist ein Beispiel für eine einfache, leere Leinwand:
Beispiel
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
Fügen Sie ein JavaScript hinzu
Nachdem Sie den rechteckigen Leinwandbereich erstellt haben, müssen Sie ein JavaScript hinzufügen, um die Zeichnung auszuführen.
Hier sind einige Beispiele:
Zeichne 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>
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>
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>
Strichtext
Beispiel
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
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>
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>
Bild zeichnen
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
HTML-Canvas-Tutorial
Um mehr darüber zu erfahren <canvas>, lesen Sie bitte unser HTML Canvas Tutorial .