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

HTML5のstrokeText()メソッドでキャンバスにテキストを描画する方法

HTML5のCanvas（キャンバス）上にテキストを描画するには、strokeText()メソッドを使用します。このメソッドは、指定されたx座標・y座標の位置に、テキストの輪郭線（ストローク）を描画します。デフォルトの色は黒です。

strokeText()メソッドの構文

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

パラメータの説明

strokeText()メソッドに渡す各パラメータは以下のとおりです。

番号パラメータ説明
1text描画するテキスト文字列
2x描画を開始する位置のx座標
3y描画を開始する位置のy座標
4maxWidth許容される最大幅（ピクセル単位）。省略可能です。

使用例

次のコードを実行すると、strokeText()メソッドを使ってHTML5のキャンバスにテキストを描画できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas strokeText()</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.strokeText("Tutorialspoint", 10, 50);
         ctxt.fillStyle = '#Cff765';
         ctxt.font = "30px Verdana";
         ctxt.strokeText("Simply Easy Learning!", 10, 90);
      </script>
   </body>
</html>

コードの解説

まずgetContext("2d")で2D描画コンテキストを取得し、fontプロパティでフォントの種類とサイズを設定します。fillStyleで塗りつぶしの色を指定した後、strokeText()を呼び出すことで、指定した座標にテキストの輪郭が描かれます。

なお、輪郭線ではなく塗りつぶされたテキストを描きたい場合は、代わりにfillText()メソッドを使用します。両者を組み合わせれば、縁取りのある装飾的なテキストも簡単に作成できます。

  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(): 定義したパスを実際に画面へ描画するサンプルコード以下のコ