javascript canvasタグに正三角形を作成する

作成日 2020.10.02
更新日 2022.07.04
javascript
javascript

javascriptで、canvasタグを使って、正三角形を作成するサンプルコードを記述してます。

1. 環境
2. 正三角形作り方
3. サンプルコード

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 102.0.5005.115

Javascript サンプル集はこちら

正三角形作り方

Pathを使用して、開始位置と終了位置を決めて作成します。

<canvas id="cvs"></canvas>

<script>

// 2D図形を扱う
let ctx = document.getElementById('cvs').getContext('2d');

// 開始位置
let startPoint = 150;
let endPoint = 200;
let size = 100;

let s1 = startPoint - size * Math.cos((90) / 180 * Math.PI);  // 一番上の頂点
let e1 = endPoint - size * Math.sin((90) / 180 * Math.PI);　// 一番上の頂点
let s2 = startPoint - size * Math.cos((210) / 180 * Math.PI); // 210 = 90+120度
let e2 = endPoint - size * Math.sin((210) / 180 * Math.PI); // 210 = 90+120度
let s3 = startPoint - size * Math.cos((330) / 180 * Math.PI); // 330 = 210+120度
let e3 = endPoint - size * Math.sin((330) / 180 * Math.PI); // 330 = 210+120度

ctx.fillStyle = '#40b812';
// パスを作成
ctx.beginPath();
ctx.moveTo(s1, e1); // moveTo(x座標, y座標)
ctx.lineTo(s2, e2); // lineTo(現在の位置からのx座標, 現在の位置からのy座標)
ctx.lineTo(s3, e3);
ctx.closePath();
// 描画
ctx.fill();

</script>

実行結果

サンプルコード

以下は、
「作成」ボタンをクリックすると、canvasタグに正三角形を作成する
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container text-center w-50" style="margin-top:150px">

    <canvas id="cvs" height="300"></canvas>

    <div>
      <button id="btn" type="button" class="btn btn-raised btn-danger mt-2">
        作成
      </button>
    </div>

  </div>

  <script>

    function hoge() {

      // 2D図形を扱う
      let ctx = document.getElementById('cvs').getContext('2d');

      // 開始位置
      let startPoint = 150;
      let endPoint = 200;
      let size = 100;

      let s1 = startPoint - size * Math.cos((90) / 180 * Math.PI);  // 一番上の頂点
      let e1 = endPoint - size * Math.sin((90) / 180 * Math.PI);　// 一番上の頂点
      let s2 = startPoint - size * Math.cos((210) / 180 * Math.PI); // 210 = 90+120度
      let e2 = endPoint - size * Math.sin((210) / 180 * Math.PI); // 210 = 90+120度
      let s3 = startPoint - size * Math.cos((330) / 180 * Math.PI); // 330 = 210+120度
      let e3 = endPoint - size * Math.sin((330) / 180 * Math.PI); // 330 = 210+120度

      ctx.fillStyle = '#40b812';

      // パスを作成
      ctx.beginPath();
      ctx.moveTo(s1, e1); // moveTo(x座標, y座標)
      ctx.lineTo(s2, e2); // lineTo(現在の位置からのx座標, 現在の位置からのy座標)
      ctx.lineTo(s3, e3);
      ctx.closePath();

      // 描画
      ctx.fill();
      
    }

    // ボタンを取得
    let elmbtn = document.getElementById('btn');
    // クリックイベントを登録
    elmbtn.onclick = function () {
      hoge();
    };

  </script>

</body>

</html>

正三角形が作成されていることが確認できます。