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

これらのプロパティはクロスブラウザーではありません。

キャンバスの位置を取得するための2つの解決策を知っています:

  • 簡単なもの：jQueryオフセットを使用

  • もう 1 つ: カスタムで複雑なコードを使用します。

     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再計算することをお勧めします。resizemousemove

デモンストレーション

于 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 に答える