如何解决添加定时器后canvas元素右侧和底部出现细边框的问题？

• 定时器启动时机错误：你把setInterval(TransparencyCheck, 500)直接写在全局作用域，此时window.onload还没触发，图片未加载完成，canvas的宽高还没被赋值为0.3倍图片尺寸，仍然是canvas默认的300*150px。前几次定时器触发执行TransparencyCheck时，操作的是默认尺寸的canvas，后续window.onload触发修改canvas宽高后，浏览器的重绘逻辑出现错位，就会产生亚像素级的抗锯齿灰边。
• 居中方式导致的亚像素偏移：你用transform: translateX(-50%)居中canvas，如果canvas的最终宽度是奇数，就会出现半像素的偏移，浏览器自动抗锯齿渲染后，就会在边缘显示出细灰边。
• 检测函数逻辑问题：TransparencyCheck里判断所有像素是否全透明的逻辑写在了for循环内部，每遍历一个像素就判断一次，会频繁触发canvas的opacity修改，导致高频重绘，加重边缘错位问题。

1. 调整定时器启动位置 #

将定时器初始化逻辑放到window.onload的最后一行，确保canvas宽高已经正确设置后再启动检测：

window.onload = function() {
    // 原有逻辑全部保留...

    // 把定时器移到这里，确保所有初始化完成后再启动
    var timer = setInterval(TransparencyCheck, 500);
}
// 删掉全局的setInterval代码

2. 优化canvas居中方式 #

修改CSS，避免transform带来的半像素问题，同时添加渲染优化属性：

#stack {
    position: relative;
    margin-top: 150px;
    display: flex;
    justify-content: center;
}
#stack canvas {
    position: absolute;
    display: block;
    /* 删掉原有left、transform、margin-top属性 */
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    border: none;
    outline: none;
}

3. 修复检测函数逻辑 #

把全透明判断移到for循环外部，减少不必要的重绘，同时添加初始化判断避免报错：

function TransparencyCheck() {
    var canvas2 = document.getElementById('canvas2');
    // 避免canvas未初始化时执行逻辑
    if (!canvas2.width) return;
    var ctxT = canvas2.getContext('2d');
    var imageDataTop = ctxT.getImageData(0, 0, canvas2.width, canvas2.height);
    var counter = 0;
    var totalPixels = imageDataTop.data.length/4;

    for (var i = 3; i < imageDataTop.data.length; i += 4) {
        if (imageDataTop.data[i] == 0) {
            counter++;
        }
    }
    // 移到循环外部执行
    if (counter == totalPixels) {
        canvas2.style.opacity = "0";
        // 全擦除后关闭定时器节省性能
        clearInterval(timer);
    }
}

可选优化：取消轮询改为触发式检测 #

不需要一直开启定时器轮询，每次用户擦除操作结束后再调用检测函数，性能更高，也能避免高频轮询导致的重绘问题：

// 删掉所有setInterval相关代码，修改擦除事件逻辑
canvas2.addEventListener('mousemove', event => {
    var x = event.offsetX;
    var y = event.offsetY;  
    const eraseSize = 15;
    ctxT.clearRect(x-eraseSize/2, y-eraseSize/2, eraseSize, eraseSize);

    // 加防抖避免频繁调用检测
    clearTimeout(window.checkTimer);
    window.checkTimer = setTimeout(TransparencyCheck, 200);
});

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