HTML5Canvas-Erklärung und Beispiel-Tutorials

HTML5 Canvas

Tag definiert Grafiken wie Diagramme und andere Bilder. Sie müssen Skripte verwenden, um Grafiken zu zeichnen.

Zeichnen Sie ein rotes Rechteck, ein Verlaufsrechteck, ein farbiges Rechteck und etwas farbigen Text auf die Leinwand.

Was ist Canvas?

HTML5 -Element wird zum Zeichnen von Grafiken über Skript (normalerweise JavaScript) verwendet abgeschlossen.

Tag ist nur ein Grafikcontainer, Sie müssen ein Skript verwenden, um die Grafiken zu zeichnen.

Mit Canva können Sie auf vielfältige Weise Pfade, Kästchen, Kreise und Zeichen zeichnen und Bilder hinzufügen.

Browser-Unterstützung

Internet Explorer 9+, Firefox, Opera, Chrome und Safari unterstützen das Hinweis: Internet Explorer 8 und frühere IE-Versionen Die Version des Browsers unterstützt das Element nicht.

Erstellen Sie eine Leinwand (Canvas)

Eine Leinwand ist ein rechteckiges Feld auf einer Webseite, das durch das Element gezeichnet wird. Element.

Hinweis: Standardmäßig hat das -Element keine Ränder und keinen Inhalt.

Ein einfaches Beispiel lautet wie folgt:

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

Tipp: Sie können mehrere -Elemente in einer HTML-Seite verwenden.

Verwenden Sie das Stilattribut, um Rahmen hinzuzufügen:

Beispiel

<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"></canvas>

Das Canvas-Element selbst verfügt nicht über die Funktion

. Alle Zeichenarbeiten müssen innerhalb von JavaScript durchgeführt werden: Instanz

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

Suchen Sie zunächst das -Element:

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

:

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

Die folgenden zwei Codezeilen zeichnen ein rotes Rechteck:

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

Die Methode fillRect(x,y,width,height) definiert die aktuelle Füllmethode des Rechtecks.

Leinwandkoordinaten

Leinwand ist ein zweidimensionales Raster.

Die Koordinaten der oberen linken Ecke der Leinwand sind (0,0)

Die obige fillRect-Methode hat Parameter (0,0,150,75).

Bedeutet: Zeichnen Sie ein 150x75 großes Rechteck auf die Leinwand, beginnend in der oberen linken Ecke (0,0).

【Verwandte Empfehlungen】

1.

Besondere Empfehlung: Version „php Programmer Toolbox“ V0.1 herunterladen 2.

3.

Das obige ist der detaillierte Inhalt vonHTML5Canvas-Erklärung und Beispiel-Tutorials. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!