JAVASCRIPT PROGRAM

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

キャンバスに線を描画しよう

HTMLのcanvasタグを使って文字や図形(線、矩形、円)を描くことができます。
今回はcanvasに線を描くプログラムを作ってみましょう。
canvasに線を描く手順は、以下のようになります。

線を描く手順

  • beginPath()メソッドを使って、パスを作成する
  • moveTo()メソッドを使って、描画する線の開始座標を指定する
  • lineTo()メソッドを使って、描画する線の終了座標を指定する
  • stroke()メソッドを使って、輪郭をなぞる方式で線を表示する

パスというのは点のリストであり、beginPath()メソッド以降に定義された描画コマンドでパスを作っていきます。
そして、moveTo()メソッドとlineTo()メソッドで描画する線の位置を決め、stroke()メソッドで線を表示するという流れです。
キャンバスを使ってデジタル時計を表示するプログラムの記事もありますので、そちらも参考にしてください。

キャンバスに線を描くプログラム

キャンバスに線を描くプログラムは、以下のようになります。
このプログラムでは、line()という関数を作って直線の描画処理をまとめています。
linewidthプロパティで線の太さを、strokeStyleプロパティで線の色を指定できます。

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

figure1-1

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

-JAVASCRIPT, PROGRAM