やってみたJavaScript(0002): canvas上のマウスクリック座標を補正

やってみたJavaScript、今回は、canvas上をマウスクリックしたときの座標のずれを修正。

clientX/Yで取得した座標をそのまま使ったらなんかずれたので、それを修正します。

test0002

枠線を消しちゃったのでcanvasがどこか分かりにくいが、なんとかいい感じになったみたい。

https://www.hircos.work/test/test0002

canvasの座標補正

調べたところ、canvasが配置されてる位置を取得して、それで補正をかけなきゃいけないっぽい。

var rect = e.target.getBoundingClientRect();
drawRect( e.clientX-rect.left, e.clientY-rect.top );

中途半端に抜き出してますけど勘弁ネ……

なんで座標がずれるか

clientX/Yだけだと、canvasの座標ではなくて画面上のどこをクリックしたかという情報。

その座標をそのままcanvas上で使うと、画面の左隅からcanvasの配置がずれてる分だけ、ずれる。

なのでつまり、いい感じに調整してcanvasの左隅を画面左隅にピッタリ合わせると、ずれない!

分かりにくいけど、canvasを左隅にしてる図

座標補正のために何してるのか

canvasが配置されてる画面上の座標を引いて「clientX/Yの原点 = canvas左端」に補正してる。

canvasの枠線でもずれる

いろいろやってて気付いたが、canvas枠線の有無でもずれるっぽい。

枠線上はクリックできる = canvas内側みたいだけど、canvas配置座標は枠線の内側っぽい?

canvasの枠線はなんか怪しいので使わないほうがよさそう!

いじょ。

JavaScript,tec