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”を描くことが出来れば、その形の線を描くことも可能になります。