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
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>
Nach dem Login kopieren
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
Verwenden Sie das Stilattribut, um Rahmen hinzuzufügen, wie zum Beispiel:
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
Nach dem Login kopieren
Beispielanalyse:
Suchen Sie zuerst das
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>Nach dem Login kopieren
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;">
Nach dem Login kopieren
Ihr Browser unterstützt das HTML5-Canvas-Tag nicht.
<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>Nach dem Login kopieren
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!
