Heim Web-Frontend HTML-Tutorial Wie stelle ich die Schriftfarbe der HTML5-Leinwand ein (Codebeispiel)?

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

Mar 07, 2019 pm 03:58 PM
html5 画布

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

Dann verwenden Sie JavaScript, um Textgrafiken im Canvas zu zeichnen

1. Holen Sie sich das Canvas-Steuerelement

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

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

var ctx = canvas.getContext("2d");
Nach dem Login kopieren

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(&#39;PHP中文网&#39;,20,20,200);
Nach dem Login kopieren

Rendering:

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

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

Vollständiger js-Code:

<canvas id="myCanvas"></canvas>
Nach dem Login kopieren

Rendering:

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

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!

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

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Verschachtelte Tabelle in HTML

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Tabellenrahmen in HTML

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

HTML-Rand links

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

HTML-Tabellenlayout

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Text in HTML verschieben

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

HTML-geordnete Liste

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

HTML-Onclick-Button

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

HTML-Eingabeplatzhalter

See all articles