我有一个用 CSS ( width:90%; height: auto;) 缩放的 16x16 画布，我正在尝试将画布上的鼠标坐标转换为 16x16 像素之一。我从一个onmousemove事件中获取它，虽然我可以获得原始屏幕坐标，但我需要找到它在画布上的位置。
尝试这个：
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>因此，您只需获取坐标，获取画布的偏移量（全屏0），然后将其除以画布的视觉宽度并乘以画布的实际宽度。如果你floor得到一个圆角像素坐标。
上面的代码适用于任何大小的画布，因为它记住了它与屏幕的偏移量（也在client鼠标坐标中）。所以无论画布的宽度如何，这都应该返回正确的像素。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句