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

前回

キャンバスに三角形を描画しよう

前回はcanvasに直線を描くプログラムを作りました。
今回はcanvasに三角形を描くプログラムを作ってみましょう。
三角形は直線を使って表現しますので、前回のプログラムを修正して作ります。
canvasに三角形を描く手順は、以下のようになります。

三角形を描く手順

beginPath()メソッドを使って、パスを作成する
moveTo()メソッドを使って、描画する線の開始座標を指定する
lineTo()メソッドを使って、三角形の頂点の座標を二つ指定する
closePath()メソッドを使って、開始座標と最後の座標を接続する
fill()メソッドかstroke()メソッドを使って、三角形を表示する

fill()メソッドを使うと三角形を塗りつぶすことができ、stroke()メソッドを使うと三角形を線で表示することができます。

キャンバスに三角形を描くプログラム

キャンバスに三角形を描くプログラムは、以下のようになります。
このプログラムでは、traiangle()という関数を作って三角形の描画処理をまとめています。
8番目の引数は"fill"にすると三角形を塗りつぶし、"stroke"にすると三角形を線で表示します。
また、9番目の引数で三角形の色を、10番目の引数で線の太さを指定できるようにしています。
なお、三角形を塗りつぶす場合は、10番目の引数は不要です。

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

    // 三角形表示関数
    function traiangle(fig,x1,y1,x2,y2,x3,y3,mode,color,thick) {
      fig.beginPath();            // 新しいパスを作成
      fig.moveTo(x1,y1);          // 三角形の開始座標
      fig.lineTo(x2,y2);          // 三角形の頂点座標
      fig.lineTo(x3,y3);          // 三角形の頂点座標
      fig.closePath();            // パスの終了

      // 塗りつぶし
      if (mode == "fill") {
        fig.fillStyle = color;    // 塗りつぶす色
        fig.fill();               // 三角形を描画

      // 線描画
      } else if (mode == "stroke") {
        fig.lineWidth = thick;    // 線の太さ
        fig.strokeStyle = color;  // 線の色
        fig.stroke();             // 輪郭を描画
      }
    }

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

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

      // 三角形描画
      traiangle(fig,100, 15,185,185, 15,185,"fill", "black");
      traiangle(fig,300, 15,385,185,215,185,"fill", "red");
      traiangle(fig,100,215,185,385, 15,385,"stroke","green",5);
      traiangle(fig,300,215,385,385,215,385,"stroke","blue" ,10);
    }
  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Traiangle</title>

</head>

// 三角形表示関数

function traiangle(fig,x1,y1,x2,y2,x3,y3,mode,color,thick) {

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

fig.moveTo(x1,y1); // 三角形の開始座標

fig.lineTo(x2,y2); // 三角形の頂点座標

fig.lineTo(x3,y3); // 三角形の頂点座標

fig.closePath(); // パスの終了

// 塗りつぶし

if (mode == "fill") {

fig.fillStyle = color; // 塗りつぶす色

fig.fill(); // 三角形を描画

// 線描画

} else if (mode == "stroke") {

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

fig.strokeStyle = color; // 線の色

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

}

// 開始関数

function strDraw() {

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

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

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

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

// 三角形描画

traiangle(fig,100, 15,185,185, 15,185,"fill", "black");

traiangle(fig,300, 15,385,185,215,185,"fill", "red");

traiangle(fig,100,215,185,385, 15,385,"stroke","green",5);

traiangle(fig,300,215,385,385,215,385,"stroke","blue" ,10);

}

</script>

</body>

</html>

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

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

MDN Web Docs ～ canvasに図形を描く

次回

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