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:

Hinweis: Tags müssen normalerweise ein ID-Attribut (oft in Skripten referenziert) sowie Breiten- und Höhenattribute angeben, um das zu definieren Größe der Leinwand.

<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

Verwenden Sie JavaScript, um Bilder zu zeichnen

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

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

Zeichnen

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

Instanzanalyse:

<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:

Dann erstellen Sie das Kontext-

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

-Objekt

:

getContext("2d")-Objekt ist ein integriertes HTML5-Objekt mit einer Vielzahl von Zeichenpfaden, Rechtecken, Kreisen, und Zeichen. Und wie man Bilder hinzufügt.

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

Die folgenden zwei Codezeilen zeichnen ein rotes Rechteck:

Setzen Sie die fillStyle-Eigenschaft auf eine CSS-Farbe, einen Farbverlauf oder ein Muster. Die Standardeinstellung für fillStyle ist #000000 (schwarz).

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.

Kostenloses h5-Online-Video-Tutorial

3.

php.cn Original-HTML5-Video-Tutorial

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!