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>確認</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」を描画します