描画キャンバスがページ内でオフセットされるのはなぜですか?
説明するのは難しいです。でも試してみます。キャンバス全体がオフセットされます。これがどのようにして起こったのか、またはそれを修正する方法がわかりません。マウスがページの左上隅にあり、中央から開始する場合と同様に、マウスは Canvas 要素自体の左上隅と一致します。コード スニペットを使用して、私が話していることを理解してください。
リーリー リーリー リーリー
このコードは少し変だと思いますが、教えてください。
説明するのは難しいです。でも試してみます。キャンバス全体がオフセットされます。これがどのようにして起こったのか、またはそれを修正する方法がわかりません。マウスがページの左上隅にあり、中央から開始する場合と同様に、マウスは Canvas 要素自体の左上隅と一致します。コード スニペットを使用して、私が話していることを理解してください。
リーリー リーリー リーリー
このコードは少し変だと思いますが、教えてください。
P粉9051445142024-03-29 14:08:37
マウス位置の計算方法が適切ではないため、ビューポートに対するキャンバスの偏差を考慮する必要があります。 getBoundingClientRect() を使用してこれを行うことはできません:
リーリー ただし、幅と高さを削除するか、サイズ変更関数と同じ高さを設定して、.canvas CSS クラスも修正する必要があります。
https://codepen.io/Joulss/pen/BaPYgpZ?editors=1111
P粉4818158972024-03-29 11:28:25
これは実際には簡単に解決できる問題です。オフセット clientX と clientY を忘れているだけです。これらの座標はウィンドウ空間内にあるため、(0,0) はウィンドウの左上隅になります。キャンバスが左上隅にもある場合はすべて問題なく見えますが、あなたの場合はキャンバスが中央にあるため、座標が揃いません。これは、キャンバスの画面位置から座標を減算することで修正できます。
これは例です:
リーリー