HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML5のCanvasでfillText()メソッドを使ってテキストを描画する方法

HTML5のCanvas上に塗りつぶしテキスト（塗り文字）を描画するには、fillText()メソッドを使用します。このメソッドは、指定した座標（x、y）の位置にテキストを描画するもので、デフォルトの文字色は黒です。

fillText()メソッドの構文

fillText(text, x, y [, maxWidth ])

fillText()メソッドで使用できるパラメータは以下のとおりです。

No.パラメータ説明
1text描画するテキスト
2xテキスト描画開始位置のx座標
3yテキスト描画開始位置のy座標
4maxWidth省略可能。テキストの最大幅（ピクセル単位）。指定すると、テキストはこの幅に収まるように縮小されます

サンプルコード

以下のコードを実行すると、HTML5のCanvas上でfillText()を使ってテキストを描画できます。フォントや色はfontプロパティとfillStyleプロパティで自由に設定できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas fillText()</title>
   </head>
   <body>
      <canvas id="newCanvas" width="400" height="150" style="border:1px solid #000000;"></canvas>
      <script>
         var c = document.getElementById("newCanvas");
         var ctxt = c.getContext("2d");
         ctxt.fillStyle = '#00F';
         ctxt.font = "20px Georgia";
         ctxt.fillText("Tutorialspoint", 10, 50);
         ctxt.fillStyle = '#Cff765';
         ctxt.font = "30px Verdana";
         ctxt.fillText("Simply Easy Learning!", 10, 90);
      </script>
   </body>
</html>

コードの解説

  • getContext("2d")：Canvasの2D描画コンテキストを取得します。すべての描画操作はこのコンテキストを通じて行います。
  • fillStyle：塗りつぶしの色を指定します。上記の例では1行目のテキストを青（#00F）、2行目を黄緑系の色（#Cff765）に設定しています。
  • font：フォントのサイズと種類をCSSと同じ書式で指定します。例では「20px Georgia」と「30px Verdana」を使用しています。
  • fillText()：指定した座標にテキストを描画します。「10, 50」はx座標10px、y座標50pxの位置を意味します。

このコードをブラウザで実行すると、黒い枠線付きのCanvas内に、青色の「Tutorialspoint」と黄緑色の「Simply Easy Learning!」という2つのテキストが異なるフォントで表示されます。

  1. HTML5のarc()メソッドで円を描く方法をわかりやすく解説

    HTML5では、<canvas>要素とarc()メソッドを組み合わせることで、簡単に円を描くことができます。完全な円を描きたい場合は、開始角度を「0」、終了角度を「2 * Math.PI」に指定するのがポイントです。 arc()メソッドのパラメータ一覧 arc()メソッドには、以下の6つのパラメータを渡します。 No.パラメータ説明 1x円の中心のx座標 2y円の中心のy座標 3r円の半径 4startingAngle描画開始の角度（ラジアン単位） 5endingAngle描画終了の角度（ラジアン単位） 6counterclockwise（true / false）反時計回りに

  2. HTML5のlineTo()メソッドで線を描画する方法

    HTML5のlineTo()メソッドで線を描画する方法HTMLで線を描画するには、canvas要素を使用します。canvas上に線を引く際に活躍するのがlineTo()メソッドです。このメソッドはx座標とy座標の2つのパラメータを受け取り、指定した位置までの直線を定義します。lineTo()メソッドは単独では機能せず、以下のメソッドと組み合わせて使用するのが基本の流れです。beginPath(): 新しいパスの作成を開始するmoveTo(): 線の始点となる座標を指定するlineTo(): 線の終点となる座標を指定するstroke(): 定義したパスを実際に画面へ描画するサンプルコード以下のコ