Was ist HTML-Canvas?

HTML-Canvas ist ein rechteckiger HTML-Bereich, auf dem Grafiken gezeichnet werden können. Über das Canvas-Element kann ein Canvas hinzugefügt werden „width“ height="height">".

Die Betriebsumgebung dieses Artikels: Windows 10-System, HTML5-Version, Dell G3-Computer.

Was ist HTML-Canvas?

Ein Canvas ist ein HTML-Bereich, auf dem Grafiken gezeichnet werden können. Das

canvas-Element wird zum Zeichnen von Grafiken auf Webseiten verwendet. Das Canvas-Element von

HTML5 verwendet JavaScript, um Bilder auf der Webseite zu zeichnen.

Die Leinwand ist ein rechteckiger Bereich, in dem Sie jedes Pixel steuern können.

canvas bietet mehrere Möglichkeiten zum Zeichnen von Pfaden, Rechtecken, Kreisen und Zeichen sowie zum Hinzufügen von Bildern.

Canvas-Element erstellen

Canvas-Element zur HTML5-Seite hinzufügen.

Geben Sie die ID, Breite und Höhe des Elements an:

<canvas id="myCanvas" width="200" height="100"></canvas>

Zeichnen Sie über JavaScript

canvas Das Element selbst verfügt über keine Zeichenfunktionen. Alle Zeichenarbeiten müssen in JavaScript durchgeführt werden:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript verwendet die ID, um das Canvas-Element zu finden:

var c=document.getElementById("myCanvas");

Dann erstellen Sie das Kontextobjekt:

var cxt=c.getContext("2d");

getContext("2d") Das Objekt ist ein integriertes HTML5-Objekt mit Eine Vielzahl von Möglichkeiten zum Zeichnen von Pfaden, Rechtecken, Kreisen und Zeichen sowie zum Hinzufügen von Bildern.

Die folgenden zwei Codezeilen zeichnen ein rotes Rechteck:

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

Die Methode fillStyle färbt es rot und die Methode fillRect gibt Form, Position und Größe an.

Empfohlenes Tutorial: „HTML-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonWas ist HTML-Canvas?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!