Question

所以...我用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也是......帮助！

Answer 1

这些属性不是跨浏览器。

我知道获得画布位置的两种解决方案：

简单的方法：使用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而不是每个mousemove重新计算它们。

Demonstration

Answer 2

Live Demo

实际上没有jQuery很容易。以下是小提琴的重要部分。 cX和cY是点击的画布的坐标。

function clicked(e) {
    var cX = 0,
        cY = 0;

    if (event.pageX || event.pageY) {
        cX = event.pageX;
        cY = event.pageY;
    }
    else {
        cX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        cY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }

    cX -= canvas.offsetLeft;
    cY -= canvas.offsetTop;

    ctx.fillRect(cX, cY, 2, 2);

}

<强> Demo with mouse move

坐标鼠标画布

2 个答案: