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

HTML5 Canvasを使って線を描く方法をわかりやすく解説

HTML5 Canvasとは

HTML5の<canvas>タグは、JavaScriptなどのスクリプトを使ってグラフィックやアニメーションを描画するための要素です。HTML5で新たに導入されたタグであり、図形描画やデータビジュアライゼーションなど、幅広い用途で活用されています。

線を描く場合は、Canvas APIが提供するlineTo()メソッドを使用します。基本的な流れは以下の通りです。

  1. beginPath()で新しいパスを開始する
  2. moveTo(x, y)で線の始点を指定する
  3. lineTo(x, y)で線の終点（次の点）を指定する
  4. stroke()でパスを実際に描画する

HTML5 Canvasで線を描画するサンプルコード

以下のコードを実行すると、Canvas上に複数の線を描画できます。ぜひお手元の環境でも試してみてください。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Canvas タグ</title>
  </head>

  <body>
    <canvas id="newCanvas" width="400" height="300" style="border:1px solid #000000;"></canvas>
    <script>
      var c = document.getElementById('newCanvas');
      var ctx = c.getContext('2d');

      // 線を描画する
      ctx.beginPath();
      ctx.moveTo(30, 30);
      ctx.lineTo(180, 100);
      ctx.moveTo(30, 10);
      ctx.lineTo(260, 100);
      ctx.stroke();
    </script>
  </body>
</html>

実行結果

このコードを実行すると、黒い枠線付きの400×300ピクセルのキャンバス内に、2本の直線が描画されます。moveTo()を再度呼び出すことで、同じパスの中に複数の独立した線を作成できる点がポイントです。

補足：線のスタイルを変更するには

stroke()を呼び出す前に、以下のプロパティを設定することで線の見た目を自由にカスタマイズできます。

  • strokeStyle：線の色を指定します（例：ctx.strokeStyle = 'red';）
  • lineWidth：線の太さをピクセル単位で指定します（例：ctx.lineWidth = 5;）
  • lineCap：線の端の形状を指定します（'butt'、'round'、'square'から選択）

これらのプロパティを組み合わせることで、より表現力豊かなグラフィックをCanvas上に実装できます。

  1. HTML Canvasで角丸の長方形を描く方法をわかりやすく解説

    HTMLで図形を描画するには、canvas要素を使用します。通常の長方形であればrect()メソッドで簡単に描けますが、角が丸い長方形（角丸長方形）を描きたい場合は、rect()メソッドだけでは対応できません。 角丸長方形を作成するには、直線を引くためのlineTo()メソッドと、二次ベジェ曲線を描くquadraticCurveTo()メソッドを組み合わせます。長方形の四隅を二次ベジェ曲線で滑らかにつなぐことで、角の丸い長方形を実現できます。 HTML5でキャンバスを作成する方法 まずは、HTML5でキャンバスを作成する基本的な手順です。<canvas>要素を配置し、JavaScr

  2. HTML5のCanvasで画像を描画する方法【drawImage()の使い方を解説】

    HTML5の<canvas>タグは、JavaScriptなどのスクリプトを使ってグラフィックスやアニメーションを描画するための要素です。HTML5で新たに導入されたタグであり、ブラウザ上で動的なビジュアル表現を実現できます。 HTML5キャンバスで画像を扱うには、drawImage()メソッドを使用します。このメソッドは、指定した画像をキャンバス上にそのまま描画します。 drawImage()メソッドの基本構文と引数 drawImage()メソッドの基本的な呼び出し形式は次の通りです。 ctx.drawImage(img, x, y); 各引数の意味は以下の通りです。 img：