JavaScriptでキャンバスに線を描画しよう【初心者向け】

2021年11月9日

キャンバスに線を描画しよう

HTMLのcanvasタグを使って文字や図形(線、矩形、円)を描くことができます。
今回はcanvasに線を描くプログラムを作ってみましょう。
canvasに線を描く手順は、以下のようになります。

線を描く手順

beginPath()メソッドを使って、パスを作成する
moveTo()メソッドを使って、描画する線の開始座標を指定する
lineTo()メソッドを使って、描画する線の終了座標を指定する
stroke()メソッドを使って、輪郭をなぞる方式で線を表示する

パスというのは点のリストであり、beginPath()メソッド以降に定義された描画コマンドでパスを作っていきます。
そして、moveTo()メソッドとlineTo()メソッドで描画する線の位置を決め、stroke()メソッドで線を表示するという流れです。
キャンバスを使ってデジタル時計を表示するプログラムの記事もありますので、そちらも参考にしてください。

キャンバスに線を描くプログラム

キャンバスに線を描くプログラムは、以下のようになります。
このプログラムでは、line()という関数を作って直線の描画処理をまとめています。
linewidthプロパティで線の太さを、strokeStyleプロパティで線の色を指定できます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Line</title>
</head>
<body onload="strDraw();">
  <canvas id="pos" width="200" height="200"></canvas>
  <script type="text/javascript">

    // 直線表示関数
    function line(fig,x1,y1,x2,y2,thick,color) {
      fig.beginPath();            // 新しいパスを作成
      fig.lineWidth = thick;      // 線の太さ
      fig.strokeStyle = color;    // 線の色
      fig.moveTo(x1,y1);          // 線の開始座標
      fig.lineTo(x2,y2);          // 線の終了座標
      fig.stroke();               // 輪郭を描画
    }

    // 開始関数
    function strDraw() {
      // ドキュメントオブジェクト作成
      var id1 = document.getElementById('pos');

      // 2Dオブジェクト作成
      var fig = id1.getContext('2d');

      // 直線描画
      line(fig,25, 25,175, 25,1,"black");
      line(fig,25, 75,175, 75,2,"red");
      line(fig,25,125,175,125,4,"green");
      line(fig,25,175,175,175,8,"blue");
    }
  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

// 直線表示関数

function line(fig,x1,y1,x2,y2,thick,color) {

fig.beginPath(); // 新しいパスを作成

fig.lineWidth = thick; // 線の太さ

fig.strokeStyle = color; // 線の色

fig.moveTo(x1,y1); // 線の開始座標

fig.lineTo(x2,y2); // 線の終了座標

fig.stroke(); // 輪郭を描画

}

// 開始関数

function strDraw() {

// ドキュメントオブジェクト作成

var id1 = document.getElementById('pos');

// 2Dオブジェクト作成

var fig = id1.getContext('2d');

// 直線描画

line(fig,25, 25,175, 25,1,"black");

line(fig,25, 75,175, 75,2,"red");

line(fig,25,125,175,125,4,"green");

line(fig,25,175,175,175,8,"blue");

}

</script>

</body>

</html>

プログラムを実行すると、WEBブラウザ上に4つの直線が表示されます。

canvasに図形を描く詳しいやり方は、以下の「MDN Web Docs」を参照してください。

MDN Web Docs ～ canvasに図形を描く

次回

JavaScriptでキャンバスに三角形を描画しよう【初心者向け】