クリックに応じて描写：イベントの利用

JavascriptにはHTMLを開いたときに動作するものもありますが何らかの行動に応じて動くスクリプトもあります。
今回はクリックすればそこを中心に円が描写されるスクリプトを作りました。



ここでクリックという動作はイベントとしてJavascriptで扱うことができます。
イベントの利用にはaddEventListener()メソッドを用いてスクリプト内に用いたいイベントを登録します。
今回はcanvas内でクリックを行ったときに描写するスクリプトなのでこのようになります。

　　　　canvas.addEventListener ("click", clickevent, false);

canvas内で動かすので最初にcanvas.を付け加えます。
また"click"で　クリックをしたときのイベントを指定します。クリック以外にもダブルクリックやマウスを乗せたときのイベントも指定できます。
次にclickeventですがこれは指定したイベントが起きたとき何をするのかを指定しています。ここではクリックされたら関数clickeventを行います。
falseという値はイベントがHTML構造の下位から上位に伝わることを意味します。つまりcanvasはbody要素内のものですからbody要素にイベントが伝わることになります。ここの値をtrueにすると逆にイベントが上位から下位に伝わります。初期値はfalseとなっています。今回はイベントはcanvas内のみなのでどちらでもいいです。
ちなみにこのように直接イベントを指定して関数などを動かすこともできます。

　　　　canvas.onclick = function name ()



今回のプログラムではクリックした場所を中心に円を描写するものですがそのためにはcanvas内での座標を求める必要があります。
クリックイベントが起きたときの座標は.clientX、.clientYで取得できますがこの座標はcanvas内の座標ではなく表示されている画面、つまりbody要素の座標となります。
そこでbody要素内で表示されるcanvasの描写の基準となるcanvasの左上隅の座標canvas.offsetLeft、canvas.offsetTopを差し引けばcanvas内の座標を求めることができます。
offsetメソッドは画面の左上隅からの位置を取得するメソッドです。
今回はこのように求める座標を導出しています。

　　　　x = point.clientX - canvas.offsetLeft;
　　　　y = point.clientY - canvas.offsetTop;

これでcanvasの左上隅を基準としたcanvas内の座標が求まります。