獲得畫布對象的位置和移動到畫布觸摸位置在HTML 5/JS

Question

我新的HTML 5和JS的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對象觸摸的位置（如動畫/通過MoveTo）。

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/