HTML5 キャンバスのフォントの色を設定するにはどうすればよいですか? (コード例)

HTML5 キャンバスでは、fillStyle 属性を使用してテキストのフォントの色を設定できます。#cc0000 などのカラー コード値、または赤などの色の英単語を受け入れることができます。皆さんの役に立つことを願って、以下で見てみましょう。 [ビデオチュートリアルの推奨: HTML チュートリアル]

まず、HTML ページで Canvas タグを使用してキャンバスを作成し、その ID 値を次のように設定する必要があります。私のキャンバス。

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

次に、JavaScript を使用してキャンバスにテキスト グラフィックを描画します

1. キャンバス コントロールを取得します

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

2. getContext() メソッドを使用して描画環境を設定し、描画オブジェクト

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

3 を作成します。fillText メソッドを使用して、キャンバスにテキストを書き込みます。パラメータは、テキストの内容とテキストの位置です。

font 属性を使用して、テキストのフォント サイズとフォント タイプを設定することもできます。

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

レンダリング:

ページに表示されるテキストがデフォルトの黒色のテキストであることがわかります。

3. テキストのフォントの色を設定したい場合は、fillStyle 属性を使用する必要があります。この属性は、#cc0000 などのカラー コード値、または次のような色の英単語を受け入れることができます。赤として。

ctx .fillStyle="red";

完全な js コード:

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

レンダリング:

上記がこの記事の全内容です。学習は誰にとっても役立ちます。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ！ ！

以上がHTML5 キャンバスのフォントの色を設定するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。