[HTML5] Canvasに図形を描く – 三角形

Canavsに三角形を描画します。
HTML5では四角形と円、線以外を描画する専用のメソッドは用意されていませんので、線を組み合わせることで三角形などのの図形を描くことができます。

『三角形』を描画する

実行例

二等辺三角形を描いています。
ctx.moveTo()で始点まで移動、その後ctx.lineTo()で指定した頂点の座標に移動しながら線を描くという非常にシンプルな処理になっています。

ソース

<canvas id="board" width="300" height="300"></canvas>

<script>
window.onload = ()=>{
  const board = document.querySelector("#board");
  const ctx = board.getContext("2d");

  // 頂点の座標を用意
  let p1 = {x:150, y:10};   // 上
  let p2 = {x:10,  y:280};  // 左
  let p3 = {x:280, y:280};  // 右

  ctx.beginPath();
  ctx.moveTo(p1.x, p1.y);      // 始点に移動
  ctx.lineTo(p2.x, p2.y);      // 左側の頂点まで線を描く
  ctx.lineTo(p3.x, p3.y);      // 右側の頂点まで線を描く
  ctx.lineTo(p1.x, p1.y);      // 始点まで線を描く

  ctx.strokeStyle = "tomato";  // 線の色
  ctx.lineWidth = 5;           // 線の太さ
  ctx.stroke();

  ctx.fillStyle = "orange";    // 塗りつぶす色
  ctx.fill();                  // 塗りつぶし
}
</script>

参考ページ

• https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
• https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/lineTo
• https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/moveTo