[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

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま

- Sponsored Link -