Javascript 在HTML5/JS中获取画布对象位置并移动到画布触摸位置

我不熟悉iPhone的HTML5和JS。在我的应用程序中，我通过以下代码（在我的

game.js

类中）成功地从

canvas

获取了接触点：

我正在显示

game.js

类中的一个对象（

hole

），如下所示：

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

现在我需要的是：

1）将

孔

对象移动到触摸位置（如动画制作/moveto）。

2）向孔中添加一个单击侦听器（我尝试了

canvas.addEventListener

，但没有成功）。

我找了很多。但无法找到合适的解决方案：(

一些教程说：删除并重新绘制对象以移动它。但是我的屏幕上有几个不同形状的图像

---

请，请帮我解决这个问题…

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

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条目中快速转换而来的，变量名很短，但您可能会得到一些提示：

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

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条目中快速转换而来的，变量名很短，但您可能会得到一些提示：