2

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

4

2 回答 2

0

这些属性不是跨浏览器的。

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

  • 最简单的一个：使用jQuery 偏移量

  • 另一个：使用自定义和复杂的代码：

     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.

示范

于 2012-11-08T19:58:12.130 回答
0

现场演示

没有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);

}​

鼠标移动演示

于 2012-11-08T20:28:57.487 回答