CANVAS上の任意の場所をタッチしたとき、どの位置に当たるのかを算出します。
タッチした場所までリトルが歩いていくサンプルです。歩く動作は真面目に実装していません。
pointerdown
イベントで、
clientX
と
clientY
を受け取ります。
getClientRects()
で取得した矩形を使用して正規化し、CANVAS上の座標へと変換します。
// イベント追加
if(window.PointerEvent)
{
frame.addEventListener("pointerdown", onPress, false);
}else
{
frame.addEventListener("touchstart", onPress, false);
frame.addEventListener("mousedown", onPress, false);
}
// イベント処理
function onPress(event)
{
var rect = canvas.getClientRects()[0];
var x = (event.clientX-rect.left) * canvas.width / rect.width ;
var y = (event.clientY-rect.top ) * canvas.height / rect.height;
/*
押下時の処理
*/
}