从鼠标坐标获取 canvas 像素位置

Question

我有一个用 CSS (width:90%; height: auto;) 缩放的 16x16 canvas，我正在尝试将 canvas 上的鼠标坐标转换为16x16 像素。我从 onmousemove 事件中获取它，虽然我可以获得原始屏幕坐标，但我需要找到它在 canvas.

上的位置

Answer 1

试试这个：

const canvas = document.querySelector( 'canvas' );

canvas.addEventListener( 'mousemove', event => {
    
    const bb = canvas.getBoundingClientRect();
    const x = Math.floor( (event.clientX - bb.left) / bb.width * canvas.width );
    const y = Math.floor( (event.clientY - bb.top) / bb.height * canvas.height );
    
    console.log({ x, y });
  
});

html,body { height: 100%; }
canvas { width: 100%; height: 100%; }

<canvas width="16" height="16"></canvas>

所以你只需获取坐标，获取 canvas 的偏移量（全屏即 0），然后将其除以 canvas 的视觉宽度，然后乘以 canvas 的实际宽度。如果你 floor 你得到一个圆角像素坐标。

以上代码适用于任何大小 canvas，因为它会记住它与屏幕的偏移量（在鼠标坐标中也是 client）。因此，无论 canvas 的宽度如何，这都应该 return 正确的像素。

从鼠标坐标获取 canvas 像素位置

Get canvas pixel position from mouse coordinates

html

javascript

css

canvas

html5-canvas