キャンバスのマウス座標はどこにありますか?

キャンバスがマウス座標を取得する方法: 1. JavaScript サンプル ファイルを作成します; 2. Canvas 要素への参照を取得し、マウス移動イベントのリスナーを追加します; 3. Canvas 上でマウスが移動すると、 getMousePos 関数をトリガーします; 4. 「getBoundingClientRect()」メソッドを使用して Canvas 要素の位置とサイズ情報を取得し、event.clientX およびevent.clientY を通じてマウス座標を取得します。

#このチュートリアルの動作環境: Windows システム、Dell G3 コンピューター。

Canvas は、Web ページ上にグラフィック、アニメーション、その他の視覚効果を描画するために使用される HTML5 の要素です。他の HTML 要素とは異なり、Canvas には独自の座標系がありません。 Web ページの座標系、つまり左上隅を原点とした座標系を使用します。

Canvas では、マウスの座標位置は Web ページ全体の座標位置を基準とします。 Canvas上でマウスを移動すると、イベントリスニングによりマウスの座標位置を取得できます。

まず、キャンバス上のマウス移動イベントのリスナーを追加する必要があります。 JavaScript を使用してこの機能を実現できます。以下はサンプル コードです。

javascript
var canvas = document.getElementById("myCanvas");
canvas.addEventListener("mousemove", getMousePos);
function getMousePos(event) {
  var rect = canvas.getBoundingClientRect();
  var x = event.clientX - rect.left;
  var y = event.clientY - rect.top;
  console.log("鼠标坐标：x=" + x + ", y=" + y);
}

上記のコードでは、まず Canvas 要素への参照を取得し、マウス移動イベントのリスナーを追加します。マウスが Canvas 上で移動すると、getMousePos 関数がトリガーされます。

getMousePos 関数では、まず getBoundingClientRect() メソッドを使用して Canvas 要素の位置とサイズの情報を取得します。次に、event.clientX とevent.clientY を通じて、Web ページ全体に対するマウスの相対的な座標位置を取得します。最後に、Canvas 要素の左上隅の座標 (rect.left とrect.top) を減算することで、Canvas に対するマウスの相対的な座標位置が取得されます。

上記のコードでは、console.log() 関数を使用して、マウスの座標位置をブラウザのコンソールに出力します。必要に応じて、グラフィックの描画やアニメーションの実行など、他の操作に座標位置を使用することもできます。

要約すると、Canvas マウスの座標は Web ページ全体の座標位置を基準としています。イベント リスナーといくつかの計算を通じて、キャンバス上のマウスの座標位置を取得し、それを使用してさまざまなインタラクティブな効果を実現できます。

以上がキャンバスのマウス座標はどこにありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。