お絵かきスクリプト：三つの状態を制御する

今回はお絵かきスクリプトを作りました。
Canvas内でマウスをクリックしてドラッグしてドロップするとその軌跡に線が描写されます。







このスクリプトではクリック、ドラッグ、ドロップのイベントリスナーを以下のように登録しています。

canvas.addEventListener ("mousedown", downevent, false);
canvas.addEventListener("mousemove", moveevent, false);
canvas.addEventListener("mouseup", upevent, false);

"mousedown"でクリック、"mousemove"でドラッグ、"mouseup"でドロップとなります。
今回のスクリプトはこれら三つのマウスの状態を参照して動くスクリプトです。
それぞれの状態でのスクリプトの動作はdownevent関数、moveevent関数、upevent関数で制御しています。
また、三つの状態をそれぞれ区別するために変数drawを用いています。

描写のために線分を描くためにCanvasのmoveToメソッドとlineToメソッドを用いています。
これはmoveToを描写の始点としてlineToを終点としています。座標はそれぞれ(x,y)、(lx,ly)となっています。
ドラッグ中に連続でmoveToをlineToの座標を取得して描写を行います。


downevent関数ではクリックしたときの座標を取得します。
ここで変数drawはtrueの値になります。
この関数で描写始めの座標(x,y)、(lx,ly)を取得することは、ドロップ後に再びクリックした際に前の座標をリセットすることにもなります。

moveevent関数では実際の描写を制御します。
ドラッグ中でも連続して座標を取得する必要があるのでここでも座標を取得しています。
if文を用いて変数drawがtrueである、つまりクリックした状態を判別して描写を行います。

upevent関数では描写の終わりを制御します。
ここで変数drawはfalseとなりmoveevent関数が実行されなくなります。