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

  • このエントリーをはてなブックマークに追加
  • LINEで送る
この記事は 2019年9月4日 に書かれたものです

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

- Sponsored Link -

『三角形』を描画する

実行例

二等辺三角形を描いています。
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>

参考ページ

コメント

コメント欄は休止中です。お問い合わせはこちらからどうぞ。ご質問はTwitterにリプを投げてください。

このブログを応援する

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

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