fillTextメソッド

メソッド fillText は、canvas上に指定された テキストを描画します。最初のパラメータはテキスト自体を受け取り、 2番目と3番目は、そのテキストを配置する点の座標です。 フォントのサイズとタイプは、プロパティ font を使用して設定します。

構文

javascriptコンテキスト.strokeRect(テキスト, x, y);

例

fillText を使用してcanvasにテキストを描画し、 サイズを 30px、タイプをArialに設定してみましょう：

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.font = '30px Arial';
ctx.fillText('Hello world', 30, 50);

Результат:

関連項目