描画キャンバスがページ内でオフセットされるのはなぜですか?

Question

説明するのは難しいです。でも試してみます。キャンバス全体がオフセットされます。これがどのようにして起こったのか、またはそれを修正する方法がわかりません。マウスがページの左上隅にあり、中央から開始する場合と同様に、マウスは Canvas 要素自体の左上隅と一致します。コード スニペットを使用して、私が話していることを理解してください。

リーリー リーリー リーリー

このコードは少し変だと思いますが、教えてください。

Answer 1

マウス位置の計算方法が適切ではないため、ビューポートに対するキャンバスの偏差を考慮する必要があります。 getBoundingClientRect() を使用してこれを行うことはできません:

リーリー

ただし、幅と高さを削除するか、サイズ変更関数と同じ高さを設定して、.canvas CSS クラスも修正する必要があります。

https://codepen.io/Joulss/pen/BaPYgpZ?editors=1111

Answer 2

これは実際には簡単に解決できる問題です。オフセット clientX と clientY を忘れているだけです。これらの座標はウィンドウ空間内にあるため、(0,0) はウィンドウの左上隅になります。キャンバスが左上隅にもある場合はすべて問題なく見えますが、あなたの場合はキャンバスが中央にあるため、座標が揃いません。これは、キャンバスの画面位置から座標を減算することで修正できます。

これは例です:

リーリー

これは、https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect" rel="nofollow noreferrer">https:// /developer.mozilla で見つけることができます。 .org /en-US/docs/Web/API/Element/getBoundingClientRect