HTML Canvas绘图位置偏移问题求助 - JavaScript

嘿，我明白你现在的困扰——用JavaScript在Canvas上绘图时，画出来的内容和光标位置差了一大截，偏右300px、偏下100px，试了clientX/clientY也没搞定对吧？别着急，这个问题我之前帮不少人排查过，大概率是两个常见原因导致的，咱们一步步来解决：

1. 先排查Canvas的尺寸匹配问题 #

这是最容易踩的坑：Canvas有两个“尺寸”——一个是它自身的width和height属性（这是绘图坐标系的实际尺寸），另一个是CSS样式里的width/height（这是它在页面上显示的尺寸）。如果这两个尺寸不匹配，就会导致坐标映射被拉伸，直接出现偏移。

比如你写了<canvas id="can" width="1000" height="1000"></canvas>，但如果CSS里给它设了#can { width: 700px; height: 900px; }，那绘图坐标就会被缩放，光标位置和实际绘制位置自然对不上。

解决办法：确保Canvas的CSS尺寸和属性尺寸一致，或者如果需要缩放显示，后续计算坐标时要考虑缩放比例。

2. 计算Canvas在页面中的实际偏移量 #

光标事件的clientX/clientY是相对于浏览器视口左上角的，而Canvas的绘图坐标是相对于它自己的左上角。如果Canvas不是刚好在视口的(0,0)位置（比如页面有导航栏、侧边栏，或者Canvas有margin/padding），那直接用clientX/clientY就会差出一段距离——这就是你遇到的偏右偏下的原因。

解决步骤：

• 首先在初始化时获取Canvas的位置信息：

var canvas, ctx, flag = false, prevX = 0, currX = 0, prevY = 0, currY = 0;

// 初始化部分
canvas = document.getElementById('can');
ctx = canvas.getContext('2d');
// 获取Canvas在视口中的位置和尺寸
const canvasRect = canvas.getBoundingClientRect();

• 然后在鼠标事件（比如mousedown、mousemove）里修正坐标：

// 以mousemove事件为例
canvas.addEventListener('mousemove', function(e) {
    if(flag) {
        // 减去Canvas的偏移量，得到相对于Canvas自身的坐标
        currX = e.clientX - canvasRect.left;
        currY = e.clientY - canvasRect.top;
        
        // 如果有CSS缩放的情况，还要乘以缩放比例
        const scaleX = canvas.width / canvasRect.width;
        const scaleY = canvas.height / canvasRect.height;
        currX *= scaleX;
        currY *= scaleY;
        
        // 接下来就是你的绘图逻辑，比如画线
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.stroke();
        ctx.closePath();
        prevX = currX;
        prevY = currY;
    }
});

额外提醒 #

如果你的页面有滚动条，clientX/clientY不会受滚动影响，但如果Canvas的位置会随滚动变化，最好在每次鼠标事件里重新获取canvasRect（或者监听滚动事件更新这个值），避免滚动后偏移量出错。

按这个方法调整后，应该就能让绘制位置和光标精准对齐了！

内容的提问来源于stack exchange，提问作者Cannon Moyer