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

Get canvas object position and move to canvas touch position in HTML 5 / JS

本文关键字：位置 移动 布触摸 触摸 HTML5 布对象 JS 对象 获取      更新时间：2023-09-26

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

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，但没有成功）

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

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

请，请帮我解决这个。。。

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

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/

相关文章：