Heim >Web-Frontend >H5-Tutorial >Wozu dient HTML5-Canvas? Detaillierte Erläuterung des neuesten Canvas-Elements von HTML5

Wozu dient HTML5-Canvas? Detaillierte Erläuterung des neuesten Canvas-Elements von HTML5

寻∝梦Original: 2018-08-13 18:52:022530Durchsuche

HTML5 hat viele neue Elemente, aber es soll es uns erleichtern, schönere Webseiten zu erstellen. Schauen wir uns nun das Element an, das ich unten vorstelle

HTML5 Canvas

Letzte Änderung am 1. August 2017. Das

-Tag definiert Grafiken wie Diagramme und andere Bilder, und 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 verwendet, was durch Skripte (normalerweise JavaScript) erfolgt. Das

-Tag ist einfach Wenn Sie einen Grafikcontainer verwenden, müssen Sie zum Zeichnen des Diagramms ein Skript verwenden.

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

Wofür wird HTML5 Canvas verwendet?

HTML5 5ba626b379994d53f7acf72a64f9b697 wird zum Zeichnen von Bildern verwendet (per Skript, normalerweise JavaScript). Das 5ba626b379994d53f7acf72a64f9b697-Element selbst verfügt jedoch über keine Zeichenfunktionen (es ist nur ein Container für Grafiken) – Sie müssen ein Skript verwenden, um das eigentliche Zeichnen durchzuführen. Die Methode getContext() gibt ein Objekt zurück, das Methoden und Eigenschaften zum Zeichnen auf der Leinwand bereitstellt.

Browser-Unterstützung

Internet Explorer 9+, Firefox, Opera, Chrome und Safari unterstützen das Element.

Hinweis: Internet Explorer 8 und frühere IE-Versionen Browser unterstützt das Element nicht.

Erstellen Sie eine Leinwand (Canvas)

Eine Leinwand ist ein rechteckiges Feld auf der Webseite, das durch das Element gezogen wird.

Hinweis: Standard Das untere Element hat keinen Rand und keinen Inhalt.

Ein einfaches Beispiel ist wie folgt, etwa:

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

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

Tipp: Sie können mehrere 5ba626b379994d53f7acf72a64f9b697-Elemente in HTML-Seiten verwenden.

Verwenden Sie das Stilattribut, um Rahmen hinzuzufügen, wie zum Beispiel:

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

Beispielanalyse:

Suchen Sie zuerst das 5ba626b379994d53f7acf72a64f9b697-Element:

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

Erstellen Sie dann das Kontextobjekt:

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

getContext("2d")-Objekt ist ein integriertes HTML5-Objekt mit mehreren Methoden zum Zeichnen von Pfaden, Rechtecken, Kreisen, Zeichen und zum Hinzufügen von Bildern .

Die folgenden zwei Codezeilen zeichnen ein rotes Rechteck:

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

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

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).

Canvas – Pfad

Um eine Linie auf Canvas zu zeichnen, verwenden wir die folgenden zwei Methoden:

moveTo(x,y), um die Startkoordinaten der Linie zu definieren

lineTo(x,y) definiert die Endkoordinate der Linie

Um die Linie zu zeichnen, müssen wir die „Ink“-Methode verwenden, genau wie Stroke().

Dies ist ein Beispiel:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>

Um einen Kreis auf der Leinwand zu zeichnen, verwenden wir die folgende Methode:

arc(x,y,r,start,stop)

Tatsächlich verwenden wir „Ink“-Methoden wie „Stroke()“ oder „Fill()“

Ein weiteres Beispiel:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Ihr Browser unterstützt das HTML5-Canvas-Tag nicht. c2caaf3fc160dd2513ce82f021917f8b

<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> 
</body>
</html>

Canvas – Text

Canvas zum Zeichnen von Text verwenden. Die wichtigen Eigenschaften und Methoden sind wie folgt:

Schriftart – Schriftart definieren

fillText (text,x,y) – Vollflächigen Text auf Leinwand zeichnen

StrokeText(text,x,y) – Hohlen Text auf Leinwand zeichnen

Leinwand – Farbverlauf

Verläufe können mit Rechtecken, Kreisen, Linien, Text usw. gefüllt werden. Verschiedene Formen können mit verschiedenen Farben angepasst werden.

Es gibt zwei verschiedene Möglichkeiten, Canvas-Verläufe festzulegen:

createLinearGradient(x,y,x1,y1) – Linienverläufe erstellen

createRadialGradient(x,y, r, x1,y1,r1) – Erstellen Sie einen radialen/kreisförmigen Farbverlauf

Wenn wir Verlaufsobjekte verwenden, müssen wir zwei oder mehr Stoppfarben verwenden.

Die Methode addColorStop() gibt den Farbstopp an. Die Parameter werden durch Koordinaten beschrieben, die 0 bis 1 sein können.

Verwenden Sie einen Farbverlauf, legen Sie den Wert von fillStyle oder StrokeStyle auf den Farbverlauf fest. Zeichnen Sie dann eine Form, beispielsweise ein Rechteck, einen Text oder eine Linie.

[Verwandte Empfehlungen]

Grundlegende Elemente von HTML, damit Sie HTML von Grund auf lernen können

Neue Tags in HTML5 Centent

Das obige ist der detaillierte Inhalt vonWozu dient HTML5-Canvas? Detaillierte Erläuterung des neuesten Canvas-Elements von HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html5 firefox css chrome safari html var 对象 canvas

Stellungnahme：

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

Vorheriger Artikel：Detaillierte Analyse von Audio in HTML5Nächster Artikel：Detaillierte Analyse von Audio in HTML5

In Verbindung stehende Artikel

Mehr sehen