在 HTML 5 / JS 中获取画布对象位置并移动到画布触摸位置答案

【问题标题】：Get canvas object position and move to canvas touch position in HTML 5 / JS在 HTML 5 / JS 中获取画布对象位置并移动到画布触摸位置
【发布时间】：2013-07-31 19:01:41
【问题描述】：

我是 HTML 5 和 JS for iPhone 的新手。在我的应用程序中，我成功地通过以下代码从canvas 获取接触点（这是在我的game.js 类中）：

canvas.addEventListener("click", mouseClickEvent, false);
function mouseClickEvent(e) {
  alert("Clicked x= "+e.layerX+" and clicked y= "+e.layerY);
}

我将 game.js 类中的一个对象 (hole) 显示为：

var hole = new Image();
hole.onload = function() {
  ctx.drawImage(hole,135,215,50,50);
}
hole.src = 'images/hole.png';

现在我需要的是：

1) 将hole 对象移动到触摸位置（如动画/移动）。

2) 向孔中添加点击监听器（我尝试了canvas.addEventListener，但没有成功）。

我搜索了很多。但找不到合适的解决方案:(

一些教程说：删除并重绘对象以移动它。但我的屏幕上有几张图片，形状各异。

请帮我解决这个问题...

【问题讨论】：

标签： javascript html animation position move

【解决方案1】：

你的触摸事件可以这样完成：

var hole = {x: 0, y: 0};

var touchEvents = function(e){
    e.preventDefault();
    if(e.targetTouches) e = e.targetTouches[0]; // since i like to test with a mouse, but still have it work with touch devices.
    hole.x=e.clientX;
    hole.y=e.clientY;
};

canvas.onmousemove=touchEvents;
canvas.ontouchmove=touchEvents;
canvas.ontouchstart=touchEvents;

这是从我的 js1k 条目快速转换而来的，变量名很短，但也许你可以得到一些提示：http://jsfiddle.net/9J25N/

【讨论】：