JavaScript fillText()で Canvasにテキストを描画する方法
環境
Google Chrome 111.0.5563.147
Windows 10 Home 64bit
書式
1.文字色を設定
ctx.fillStyle = color;
2.文字サイズを設定
context.font = font
3.テキストを描画
context.fillText(文字列,座標x,座標y)
CanvasRenderingContext2D.fillText(text, x, y [, maxWidth]);
CanvasRenderingContext2D の fillText() はキャンバス 2D API のメソッドで、指定した座標にテキスト文字列を描画し、
その文字を現在の fillStyle で塗りつぶします。
使用例
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas"></canvas>
<button onclick="funA()">確認</button>
<script>
function funA() {
let canvas = document.querySelector('#canvas');
let context = canvas.getContext('2d');
var ctx = canvas.getContext('2d');
//filText
context.beginPath();
// テキストを描画
let text = 'Test Data';
// 文字色
context.fillStyle = 'green';
// 文字サイズ、フォント指定
context.font = "bold 20px Arial";
// テキストを描画、座標
context.fillText(text, 30, 50);
}
</script>
</body>
</html>
実行結果
「確認」ボタンを押すと、Canvasにテキスト「Test Data」を描画します