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

  • このエントリーをはてなブックマークに追加
  • LINEで送る

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>

参考ページ

このブログを応援する

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

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

ご質問やリクエストなどお気軽に。メールアドレスの入力は任意です。書き込みが反映されるまで時間がかかります。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください