向canvas元素添加一个单击事件处理程序，返回单击的x和y坐标(相对于canvas元素)，最简单的方法是什么?
不需要传统浏览器兼容性，Safari、Opera和Firefox就可以了。
当前回答
这里是一个简化的解决方案(这并不适用于边框/滚动):
function click(event) {
const bound = event.target.getBoundingClientRect();
const xMult = bound.width / can.width;
const yMult = bound.height / can.height;
return {
x: Math.floor(event.offsetX / xMult),
y: Math.floor(event.offsetY / yMult),
};
}
其他回答
这是一个非常好的教程-
http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
function writeMessage(canvas, message) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = '18pt Calibri';
context.fillStyle = 'black';
context.fillText(message, 10, 25);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
canvas.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(canvas, evt);
var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
writeMessage(canvas, message);
}, false);
希望这能有所帮助!
你可以这样做:
var canvas = yourCanvasElement;
var mouseX = (event.clientX - (canvas.offsetLeft - canvas.scrollLeft)) - 2;
var mouseY = (event.clientY - (canvas.offsetTop - canvas.scrollTop)) - 2;
这将为您提供鼠标指针的确切位置。
这里是一个简化的解决方案(这并不适用于边框/滚动):
function click(event) {
const bound = event.target.getBoundingClientRect();
const xMult = bound.width / can.width;
const yMult = bound.height / can.height;
return {
x: Math.floor(event.offsetX / xMult),
y: Math.floor(event.offsetY / yMult),
};
}
在Prototype中，使用cumulativeOffset()执行上面Ryan Artecona提到的递归求和。
http://www.prototypejs.org/api/element/cumulativeoffset
现代浏览器现在可以帮你处理这个。Chrome, IE9和Firefox支持这样的offsetX/Y，从点击处理程序传入事件。
function getRelativeCoords(event) {
return { x: event.offsetX, y: event.offsetY };
}
大多数现代浏览器也支持layerX/Y，但是Chrome和IE使用layerX/Y作为页面点击的绝对偏移量，包括边距、填充等。在Firefox中，layerX/Y和offsetX/Y是等价的，但是offset之前并不存在。所以，为了兼容稍微老一点的浏览器，你可以使用:
function getRelativeCoords(event) {
return { x: event.offsetX || event.layerX, y: event.offsetY || event.layerY };
}
