正確なマウス座標を取得できない問題: ページのサイズを変更するときに HTML5 キャンバスを使用する

Question

この ピクセル エフェクト をフロントエンドの専門家から作成したいと考えています。

フルスクリーン キャンバスでピクセル効果全体を実現することはできましたが、:

リーリー

そしてマウスの座標を取得するのは簡単です

リーリー

この時点では、キャンバスの幅と高さはドキュメントと同じであるため、マウスの正確な座標を取得するのは簡単です。 しかし、800px の寸法を使用しようとすると、上記の Web サイトに表示されるものと同じになります。サイズ変更に関連する問題もいくつかあります。

マウスの精度を維持する方法を知りたいです。

＃＃＃助けてくれてありがとう。

Answer 1

e.x と e.y を使用すると、キャンバスのイベント リスナーで使用したとしても、キャンバスの座標だけでなく、ページ全体の左上隅のピクセルを基準としたマウス座標が返されると思います。 「めちゃくちゃ」というのが、どこをクリックしてもピクセル効果が一定の方向にオフセットされることを意味する場合、これはおそらく問題であり、 e.x と e.y を e.clientX と e.clientY に置き換える必要があります。 e.clientX の「クライアント」は、リスナーのターゲットとなる要素を指し、イベント座標がページではなく要素を基準にして指定されることを指定します。それ以外の方法で質問が生じた場合、私には答えがないと思います。