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