JavaScript»キャンバス»lineToで線をひく パスをつかって線をかいてみる

ファイル名: js-canvas/quest_00061.html

下のソースコードをうつして、キャンバスに図のような線をかいてみましょう。

ソースコード

const canvas = document.getElementById("line");
const context = canvas.getContext("2d");

context.lineWidth = 3;
context.strokeStyle = "rgb(255, 165, 0)";

context.beginPath();
context.moveTo(50, 100);
context.lineTo(270, 220);
context.stroke();

解説

今回は”path”と呼ばれる機能を使って線を引いていきます。
“path”とは図形や線を描くための下書きになります。最終的に”path”の形に線を描いたり。”path”で囲まれた部分を塗りつぶしたりして図形を描きます。
今までの命令とは違い、自分で形を決めることが出来る自由度の高さがメリットです。
但し、自由度が高い分、少し記述が難しいので1つずつしっかりと理解していきましょう。


context.beginPath();

この命令からパスの記述を始めます。”begin”という英語が”始める”という意味になります。
また、今まで書いていた”path”を全て消す、という動きもあります。
“path”だけを消すのでそれまでに書いていた図形は残ります。 

context.moveTo(50, 100);

下書きを描き始める点を決めます。”move”は”動かす”という意味です。
その地点に下書き用のペンを置くイメージを持つと分かりやすいかもしれません。
ペン先を置いているのでその地点に点の形で”path”を描きます。 

context.lineTo(270, 220);

今下書き用のペンを置いている位置(50,100)から与えられた座標(270,220)まで真っすぐに”path”を引きます。
また、ペン先は移動後の地点(270,220)に置いた状態になります。 

context.stroke();

“path”で描いた線に色を付けます。この命令を実行することで”path”は目に見える線になります。
“stroke”を実行しないとどれだけ”path”を引いても目には見えません。忘れないようにしましょう。

また、今回は直線でしたが、円や曲線等の形に”path”を描くことが出来れば、その形の線を描くことも可能になります。