如何在顶部canvas像素全透明时触发事件及解决getImageData边框问题

1. 上层canvas完全擦除时触发事件的实现 #

你原有逻辑的问题在于仅在页面初始化时读取了一次上层canvas的像素数据，没有在每次擦除动作后做检测，同时遍历逻辑也存在错误。可以按照以下方案优化：

• 每次擦除动作完成后做节流检测（避免mousemove高频触发导致性能问题），判断所有像素的alpha通道是否全部为0
• 检测时仅遍历alpha通道即可：像素数据每4位为一组，第4位是alpha值，只要存在任意一个alpha值大于0即说明未完全擦除
• 额外加个状态锁，避免完全擦除后重复触发事件

2. 边缘细灰色边框问题解决 #

这个问题通常由以下几个原因导致，对应修改即可：

• canvas的width/height属性和CSS设置的宽高不匹配，画布被拉伸产生半透明抗锯齿边缘，确保两者数值完全一致即可
• 浏览器给canvas默认加了边框/轮廓，给canvas加CSS规则border: none; outline: none;即可
• 擦除时坐标超出画布范围，抗锯齿算法生成了半透明灰度像素，擦除前对坐标做范围限制即可
• 画布默认开启了图像平滑，关闭即可：ctxT.imageSmoothingEnabled = false;

修改后的完整JS代码 #

window.onload = function() {
    // 完全擦除状态锁，避免重复触发事件
    let isFullyErased = false;
    // 节流定时器
    let checkTimer = null;

    //Move speaker image across page
    var speaker = document.getElementById('speaker');
    speaker.onload = MoveElement(speaker, "right", 1000);

    //Create canvases & contexts
    var canvas = document.getElementById('canvas');
    var ctxB = canvas.getContext('2d');
    var canvas2 = document.getElementById('canvas2');
    var ctxT = canvas2.getContext('2d');
    // 关闭图像平滑，避免边缘半透明
    ctxT.imageSmoothingEnabled = false;

    //Get waterfall image object
    var waterfall = document.getElementById('waterfall');

    //Set canvas w&h properties
    const canvasWidth = canvas.width = canvas2.width = .3*waterfall.width;
    const canvasHeight = canvas.height = canvas2.height = .3*waterfall.height;

    //Populate Bottom canvas with waterfall image
    ctxB.drawImage(waterfall, 0, 0, canvas.width, canvas.height);

    //Populate Top canvas with white rectangle
    ctxT.fillStyle = "white";
    ctxT.fillRect(0, 0, canvas2.width, canvas2.height);

    // 检测是否完全擦除的方法
    function checkAllErased() {
        if (isFullyErased) return;
        const imageDataTop = ctxT.getImageData(0, 0, canvasWidth, canvasHeight);
        const data = imageDataTop.data;
        // 只遍历alpha通道，步长为4
        for (let i = 3; i < data.length; i += 4) {
            // 只要有一个像素alpha大于0，说明没擦完
            if (data[i] > 0) {
                return false;
            }
        }
        // 全部擦除触发事件
        isFullyErased = true;
        onFullyErased();
        return true;
    }

    // 完全擦除后的自定义逻辑
    function onFullyErased() {
        // 这里写你要触发的逻辑，比如跳转、弹出提示等
        console.log('上层canvas已完全擦除！');
        // 示例：移除擦除监听
        canvas2.removeEventListener('mousemove', eraseHandler);
    }

    // 擦除逻辑抽离
    const eraseHandler = event => {
        if (isFullyErased) return;
        var x = event.offsetX;
        var y = event.offsetY;  
        const eraseSize = 125;
        // 限制擦除范围不超出画布，避免边缘抗锯齿产生半透明像素
        const eraseX = Math.max(0, x - eraseSize/2);
        const eraseY = Math.max(0, y - eraseSize/2);
        const eraseW = Math.min(eraseSize, canvasWidth - eraseX);
        const eraseH = Math.min(eraseSize, canvasHeight - eraseY);
        ctxT.clearRect(eraseX, eraseY, eraseW, eraseH);

        // 节流：停止擦除200ms后再做检测，避免性能损耗
        clearTimeout(checkTimer);
        checkTimer = setTimeout(checkAllErased, 200);
    }

    //Make Top canvas "erasable"
    canvas2.addEventListener('mousemove', eraseHandler);
}

function PlayAudio() {
    document.getElementById('boyfriend').play();
}


//Move an element in a given direction a certain distance
function MoveElement(element, direction, totalDistance) {
    //Determine horizontal or vertical direction
    var LeftOrTop = (direction=="left" || direction=="right") ? "left" : "top";
    
    //Set default frame distance
    var frameDistance = 150;

    //Adjust for backwards direction
    if (direction=="left" || direction=="up") {
        totalDistance *= -1;
        frameDistance = -1;
    }
    
    //Get style data object for element
    var elementStyle = window.getComputedStyle(element);

    //Get Left or Top position of element
    var positionValue = elementStyle.getPropertyValue(LeftOrTop).replace("px", "");

    //Apply direction and distance change to element
    var destination = (Number(positionValue) + totalDistance) + "px";

    function MoveFrame() {
        //If element reaches its destination...
        if (elementStyle.getPropertyValue(LeftOrTop) == destination) {
            //...stop the interval motion
            clearInterval(movingFrames);
        }
        //Otherwise, continue the interval movement
        else {
            elementStyle = window.getComputedStyle(element);
            positionValue = elementStyle.getPropertyValue(LeftOrTop).replace("px", "");
            element.style[LeftOrTop] = (Number(positionValue) + frameDistance) + "px";
        }
    }
    //Define time interval for movement
    var movingFrames = setInterval(MoveFrame, 500);
}

CSS补充规则 #

#stack canvas {
    /* 新增规则，去掉默认边框轮廓 */
    border: none;
    outline: none;
    /* 确保CSS宽高和canvas属性宽高一致，如果有缩放需求可以用transform */
}

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