求助：如何获取CSS fixed定位Canvas元素位置？解决定位报错问题

我完全懂你碰到的这个坑——当把Canvas设为position: fixed时，你的findPos()函数直接返回了undefined，导致getColor里读取x属性时抛出Cannot read property 'x' of undefined的错误。

问题根源 #

这是因为fixed定位的元素的offsetParent属性是null。你的原函数里只有当obj.offsetParent存在时才会进入循环计算偏移量，否则直接返回undefined，这就触发了后续的报错。而position: absolute的元素offsetParent是存在的（通常是最近的定位父元素），所以原函数能正常工作。

解决方案1：修复原函数兼容fixed定位 #

我们可以在原函数里增加对fixed定位的判断，直接读取它的offsetLeft和offsetTop（因为fixed元素的偏移是相对于视口的）：

function findPos(obj) {
    let curleft = 0, curtop = 0;
    const computedStyle = window.getComputedStyle(obj);
    
    // 单独处理fixed定位的情况
    if (computedStyle.position === 'fixed') {
        curleft = obj.offsetLeft;
        curtop = obj.offsetTop;
    } else if (obj.offsetParent) {
        // 原有的逻辑处理absolute/relative等定位
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    } else {
        // 处理static等无offsetParent的情况
        curleft = obj.offsetLeft;
        curtop = obj.offsetTop;
    }
    
    return { x: curleft, y: curtop };
}

解决方案2：用更可靠的getBoundingClientRect()（推荐） #

其实有个更通用的方法，不管元素是什么定位方式都能准确获取位置——使用getBoundingClientRect()。这个方法会返回元素相对于浏览器视口的位置信息，我们可以结合滚动偏移转换成文档坐标：

function findPos(obj) {
    const rect = obj.getBoundingClientRect();
    // rect.left/top是相对于视口的位置，加上滚动量得到文档坐标
    return { 
        x: rect.left + window.scrollX, 
        y: rect.top + window.scrollY 
    };
}

额外提示：如果是获取Canvas鼠标交互坐标 #

如果你的getColor函数是用来获取鼠标点击位置的Canvas像素颜色，其实不需要转换成文档坐标，直接用鼠标事件的clientX/clientY减去Canvas的视口偏移即可：

canvas.addEventListener('click', function(e) {
    const rect = this.getBoundingClientRect();
    // 直接得到Canvas内部的相对坐标
    const canvasX = e.clientX - rect.left;
    const canvasY = e.clientY - rect.top;
    
    // 这里用canvasX和canvasY去获取像素颜色
    const ctx = this.getContext('2d');
    const pixel = ctx.getImageData(canvasX, canvasY, 1, 1).data;
    // ...后续处理颜色逻辑
});

这种方式完全避开了定位方式的影响，是处理Canvas鼠标交互更稳妥的做法。

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