所以...我用 jquery 创建了 canvas 元素:
var canvasElement = $("<canvas id='map' width='" + CANVAS_WIDTH + "' height='" + CANVAS_HEIGHT + "'></canvas");
var canvas = canvasElement.get(0).getContext("2d");
canvasElement.appendTo('body');
现在我想获取鼠标坐标,但下一个代码不起作用:
canvasElement.onmousemove = mousemove;
function mousemove(evt) {
var mouseX = evt.pageX - canvasElement.offsetLeft;
var mouseY = evt.pageY - canvasElement.offsetTop;
alert(mouseX+":"+mouseY);
}
canvasElement.offsetLeft 不起作用,evt.pageX 也...帮助!
最佳答案
这些属性不是跨浏览器的。
我知道获取 Canvas 位置的两种解决方案:
- 最简单的方法:使用 jQuery offset
另一个:使用自定义的复杂代码:
if (!canvasElement.offsetX) { // firefox var obj = canvasElement; var oX = obj.offsetLeft;var oY = obj.offsetTop; while(obj.parentNode){ oX=oX+obj.parentNode.offsetLeft; oY=oY+obj.parentNode.offsetTop; if(obj==document.getElementsByTagName('body')[0]){break} else{obj=obj.parentNode;} } canvas_position_x = oX; canvas_position_y = oY; } else { // chrome canvas_position_x = canvasElement.offsetX; canvas_position_y = canvasElement.offsetY; }
由于存在循环,您最好存储canvas_position_x
和canvas_position_y
并在每个文档resize
时重新计算它们,而不是在每个鼠标移动
。
关于javascript - 坐标鼠标 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13296710/