JAVASCRIPT PROGRAM

JavaScriptでキャンバスに三角形を描画しよう【初心者向け】

キャンバスに三角形を描画しよう

前回はcanvasに直線を描くプログラムを作りました。
今回はcanvasに三角形を描くプログラムを作ってみましょう。
三角形は直線を使って表現しますので、前回のプログラムを修正して作ります。
canvasに三角形を描く手順は、以下のようになります。

三角形を描く手順

  • beginPath()メソッドを使って、パスを作成する
  • moveTo()メソッドを使って、描画する線の開始座標を指定する
  • lineTo()メソッドを使って、三角形の頂点の座標を二つ指定する
  • closePath()メソッドを使って、開始座標と最後の座標を接続する
  • fill()メソッドかstroke()メソッドを使って、三角形を表示する

fill()メソッドを使うと三角形を塗りつぶすことができ、stroke()メソッドを使うと三角形を線で表示することができます。

キャンバスに三角形を描くプログラム

キャンバスに三角形を描くプログラムは、以下のようになります。
このプログラムでは、traiangle()という関数を作って三角形の描画処理をまとめています。
7番目の引数は"fill"にすると三角形を塗りつぶし、"stroke"にすると三角形を線で表示します。
また、8番目の引数で三角形の色を、9番目の引数で線の太さを指定できるようにしています。
なお、三角形を塗りつぶす場合は、9番目の引数は不要です。

プログラムを実行すると、WEBブラウザ上に4つの三角形が表示されます。

figure2-1

canvasに図形を描く詳しいやり方は、以下の「MDN Web Docs」を参照してください。

-JAVASCRIPT, PROGRAM