質問

キャンバスを使ったちょっとしたお絵かきアプリを作りたいのですが、どうすればいいですか？そこで、キャンバス上のマウスの位置を見つける必要があります。

どのように解決するのですか？

JQueryをお使いの方へ。

時々、ネストした要素があり、そのうちの1つにイベントが添付されている場合、ブラウザが何を親として見ているかを理解するのに混乱することがあります。ここでは、その親を指定することができます。

マウスの位置を取得し、親要素のオフセット位置から引き算します。

var x = evt.pageX - $('#element').offset().left;
var y = evt.pageY - $('#element').offset().top;

スクロールペイン内のページでマウス位置を取得しようとする場合。

var x = (evt.pageX - $('#element').offset().left) + self.frame.scrollLeft();
var y = (evt.pageY - $('#element').offset().top) + self.frame.scrollTop();

またはページからの相対位置。

var x = (evt.pageX - $('#element').offset().left) + $(window).scrollLeft();
var y = (evt.pageY - $('#element').offset().top) + $(window).scrollTop();

以下の性能最適化に注意してください。

var offset = $('#element').offset();
// Then refer to 
var x = evt.pageX - offset.left;

この方法では、JQuery は #element を各行ごとに指定します。

更新情報

より新しい、JavaScriptのみのバージョンは 回答 by @anytimecoder -- こちらもご覧ください。 getBoundingClientRect()のブラウザサポートについて .