Question

我是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);
}

我正在hole类中显示一个对象（game.js）：

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

现在我需要的是：

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

2）在洞中添加点击监听器（我尝试了canvas.addEventListener，但没有工作）。

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

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

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

Answer 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/

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

1 个答案: