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

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

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

HTMLで線を描画するには、canvas要素を使用します。canvas上に線を引く際に活躍するのがlineTo()メソッドです。このメソッドはx座標とy座標の2つのパラメータを受け取り、指定した位置までの直線を定義します。

lineTo()メソッドは単独では機能せず、以下のメソッドと組み合わせて使用するのが基本の流れです。

  • beginPath(): 新しいパスの作成を開始する
  • moveTo(): 線の始点となる座標を指定する
  • lineTo(): 線の終点となる座標を指定する
  • stroke(): 定義したパスを実際に画面へ描画する

サンプルコード

以下のコードを実行すると、HTML5のlineTo()メソッドを使って線を描画できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Canvas</title>
   </head>
   <body>
      <canvas id="newCanvas" width="300" height="150" style="border:1px solid #000000;"></canvas>
      <script>
         var c = document.getElementById("newCanvas");
         var ctxt = c.getContext("2d");
         ctxt.beginPath();
         ctxt.moveTo(70, 50);
         ctxt.lineTo(50, 120);
         ctxt.stroke();
      </script>
   </body>
</html>

コードの解説

まず、getElementById()でcanvas要素を取得し、getContext("2d")によって2D描画コンテキストを取得します。次にbeginPath()でパスを開始し、moveTo(70, 50)で始点を設定したうえで、lineTo(50, 120)により座標(50, 120)までの直線を定義しています。最後にstroke()を呼び出すことで、実際に線がcanvas上に描かれます。

複数回lineTo()を呼び出せば、折れ線グラフのような複雑な図形も簡単に描画できるため、さまざまな場面で応用できます。

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

    HTML5のCanvas上に塗りつぶしテキスト（塗り文字）を描画するには、fillText()メソッドを使用します。このメソッドは、指定した座標（x、y）の位置にテキストを描画するもので、デフォルトの文字色は黒です。fillText()メソッドの構文fillText(text, x, y [, maxWidth ])fillText()メソッドで使用できるパラメータは以下のとおりです。No.パラメータ説明1text描画するテキスト2xテキスト描画開始位置のx座標3yテキスト描画開始位置のy座標4maxWidth省略可能。テキストの最大幅（ピクセル単位）。指定すると、テキストはこの幅に収まるよう

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

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