So zeichnen Sie Textgrafiken im HTML5-Canvas

In HTML5 müssen Sie zuerst das Tag verwenden, um eine Leinwand zu erstellen, und dann das JavaScript-Schriftartattribut fillText() oder die Methode StrokeText() verwenden, um Textgrafiken in die Leinwand zu zeichnen.

Das -Tag von HTML5 kann zum Zeichnen verschiedener Grafiken auf Webseiten verwendet werden. Wie zeichnet man also Textgrafiken? Dieser Artikel führt Sie in die Methode zum Zeichnen von Textgrafiken im HTML5-Canvas ein. Ich hoffe, dass er für Sie hilfreich ist. [Video-Tutorial-Empfehlung: HTML5-Tutorial]

Verwenden Sie das -Tag, um eine Leinwand zu erstellen

Auf einer HTML-Seite ist die Leinwand ein rechteckiger Bereich. Es wird standardmäßig mit dem Canvas-Tag-Element angegeben. Die Leinwand hat keine Ränder und keinen Inhalt, sie ist wie ein Container. Wir können jedoch die integrierten Eigenschaften oder CSS verwenden, um einige Stile hinzuzufügen.

Beispiel: Verwenden Sie das Breitenattribut und das Höhenattribut, um die Breite und Höhe festzulegen.

<canvas id = "mycanvas" width ="400" height ="250"> </canvas>

Wir können auch CSS verwenden, um der Leinwand Rahmen und Hintergrundfarben hinzuzufügen, zum Beispiel:

<canvas id="myCanvas" width="300" height="200" style="border:2px solid red;background-color:pink">当前的浏览器不支持HTML5 canvas标签。</canvas>

Wenn die Leinwand nicht erstellt werden kann, -Tag weist darauf hin, dass der aktuelle Browser das HTML5-Canvas-Tag nicht unterstützt.

Rendering:

Verwenden Sie JavaScript, um Textgrafiken im Canvas zu zeichnen

Schauen wir uns zunächst die wichtigsten Attribute und Methoden an, die zum Zeichnen von Textgrafiken auf der Leinwand verwendet werden müssen:

1 das Text-Schriftartattribut, mit dem Sie das aktuelle Schriftartattribut des Textinhalts auf der Leinwand festlegen oder zurückgeben können. Seine Verwendung ähnelt der CSS-Schriftarteneigenschaft. 2.

fillText()-Methode

: „Fülltext“ auf der Leinwand zeichnen. Die Standardfarbe des Textes ist: Schwarz. Die grundlegende Syntax lautet:

fillText(text, x, y, [maxWidth])

3.

StrokeText()-Methode

: Zeichnen Sie Text auf die Leinwand (ohne Füllung), dh zeichnen Sie die Textumrissgrafik auf ähnliche Weise Die Standardfarbe ist: Schwarz. Die grundlegende Syntax lautet:

strokeText(text, x, y, [maxWidth])

Parameterbeschreibung:

text: Gibt die Textgrafiken an, die auf der Leinwand ausgegeben werden müssen.

x, y: relativ zur Leinwand, die x-Koordinate und die y-Koordinatenposition des Beginns des Textzeichnens

maxWidth: optionaler Parameter, der die maximal zulässige Textbreite in Pixel angibt.

Sehen wir uns andere Stilattribute von Text an, die verwendet werden können:

1. textAlign-Stilattribut: Legt die aktuelle Ausrichtung des Textinhalts basierend auf der X-Achsen-Koordinate fest oder gibt sie zurück.

Die Werte sind: Start (Standardwert, geben Sie die Startposition des Texts an), Ende (geben Sie die Endposition des Texts an), Mitte (geben Sie die Platzierungsposition der Textmitte an) , links (linke Ausrichtung), rechts (rechte Ausrichtung).

2. fillStyle-Attribut: Farbe, Farbverlauf oder Modus zum Füllen des Gemäldes festlegen oder zurückgeben.

Lassen Sie uns Textgrafiken zeichnen und anhand von Beispielen sehen, wie man sie zeichnet:

Beispiel 1: FillText() verwenden

<canvas id ="myCanvas" width ="400" height ="250" style="border:2px solid red;">当前浏览器不支持HTML5 canvas标记。</canvas>

<script>
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.font = "40px Arial";
ctx.fillText("PHP中文网！",10,50);
</script>

Rendering:

Beispiel 2: Verwendung von StrokeText()

<script>
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.font = "40px Arial";
ctx.strokeText("PHP中文网！",10,50);
</script>

Rendering:

Beispiel 3: Farbe hinzufügen und Text zentrieren

<script>
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d");  
ctx.font="30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("PHP中文网！",canvas.width/2, canvas.height/2);
</script>

Rendering:

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie Textgrafiken im HTML5-Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!