Heim > Web-Frontend > H5-Tutorial > Hauptteil

HTML5Canvas-Erklärung und Beispiel-Tutorials

零下一度
Freigeben: 2017-05-16 11:39:04
Original
2211 Leute haben es durchsucht

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.

HTML5Canvas-Erklärung und Beispiel-Tutorials

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

Suchen Sie zunächst das -Element:

Dann erstellen Sie das Kontext-
var c=document.getElementById("myCanvas");
Nach dem Login kopieren
-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");
Nach dem Login kopieren

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);
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage