Wie stelle ich die Schriftfarbe der HTML5-Leinwand ein (Codebeispiel)?

Im HTML5-Canvas können wir das Attribut fillStyle verwenden, um die Schriftfarbe des Textes festzulegen. Es kann einen Farbcodewert wie #cc0000 oder ein englisches Wort einer Farbe wie Rot akzeptieren. Werfen wir einen Blick darauf und hoffen, dass es für alle hilfreich ist. [Video-Tutorial-Empfehlung: HTML-Tutorial]

Zuerst müssen wir mithilfe des Canvas-Tags in der HTML-Seite eine Leinwand erstellen und deren ID-Wert auf festlegen myCanvas.

<canvas id="myCanvas"></canvas>

Dann verwenden Sie JavaScript, um Textgrafiken im Canvas zu zeichnen

1. Holen Sie sich das Canvas-Steuerelement

var canvas = document.getElementById("myCanvas");// 查找画布元素

2. Verwenden Sie die Methode getContext(), um die Zeichenumgebung zu konfigurieren Erstellen Sie das Zeichenobjekt

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

3. Verwenden Sie die fillText-Methode, um Text in die Leinwand zu schreiben. Die Parameter sind der Textinhalt und die Position des Textes.

Wir können das Schriftartattribut auch verwenden, um die Schriftgröße und den Schriftartentyp des Textes festzulegen.

ctx .font="20px 微软雅黑";
ctx .fillText('PHP中文网',20,20,200);

Rendering:

Sie können sehen, dass der auf der Seite jetzt angezeigte Text der standardmäßige schwarze Text ist.

3. Wenn Sie die Schriftfarbe des Textes festlegen möchten, müssen Sie das fillStyle-Attribut verwenden. Dieses Attribut kann einen Farbcodewert wie #cc0000 oder ein englisches Wort einer Farbe akzeptieren als rot.

ctx .fillStyle="red";

Vollständiger js-Code:

<canvas id="myCanvas"></canvas>

Rendering:

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, das kann so sein hilfreich für alle. Lernen hilft. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonWie stelle ich die Schriftfarbe der HTML5-Leinwand ein (Codebeispiel)?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!