** 重複としてマークする前にお読みください！ **キャンバスにキャンバスのマウスの位置を取得
キャンバス上のマウスの位置を取得することはほぼ正常に機能します。
私のウィンドウサイズが800 x 600
マイキャンバスサイズが400 x 300です：
canvas.width = 400;
canvas.height = 300;
マイキャンバスcssサイズは100% x 100%です：
canvas {width: 100vw; height: 100vh;}
問題がある：私のマウスは内にある場合私はこのマウスの位置：400, 300を取得するキャンバスの真ん中。私のウィンドウのサイズが1600 x 1200なら、私は800, 600を得るでしょう。
私はキャンバスマウスの位置を取得したいと思います。私の言うことは、窓の大きさにかかわらず、200, 150を探しているのですか？
どうすればよいですか？ ありがとうございました。
モデル座標から画面座標に変換して戻す必要があります。これは良い説明です：http://www.ckollars.org/canvas-two-coordinate-scales.html
よろしくお願いします！私は、 'ctx.toModelX（x）'のような組み込みの関数があったと思う。 –
あなたのコードに貼り付けることができます。
document.getElementById("canvasId").addEventListener('mousemove',function(event){mousePos(event);});
function getMousePos(e){
var rect = canvas.getBoundingClientRect();
//this gets your canvas size.
return {
x: Math.round(e.clientX - rect.left),
y: Math.round(e.clientY - rect.top)
};
function mousePos(e){
var pos = getMousePos(e);
var mouseX = pos.x;
var mouseY = pos.y;
}
次に、mouseXとmouseYを別の場所で参照できます。
//enter the rest of your code here.
キャンバスのサイズは100vw/100vhと定義されているため、キャンバスのサイズは400x300ではありません。あなたはあなたが求めたものを正確に得ています。キャンバス上の位置はキャンバスのサイズで表示されます。それを400x300のハードコードされた値に変換する場合は、自分で数学を行う必要があります。 '実際のX =（表示されたX /ハードコードされたX）* Xpos' –
' canvas.width'と 'canvas.height'は400と300ですが、' css'は** 100vw /欲しいです。私は自分の数学をすることができましたが、おそらく簡単で素早い組み込みの方法がありますか？ –