开发Canvas绘图应用：图形填充函数存在留白问题求解答

留白示意图 #

问题描述 #

我正在开发一款绘图应用，需要实现图形填充功能。目前仅针对基础图形进行填充测试，但填充函数执行后仍存在留白区域，恳请各位帮忙分析原因。

代码实现 #

function drawTriangleBasic() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = "#FFFFFF";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    let height = 400 * Math.cos(Math.PI / 6);

    ctx.beginPath();
    ctx.moveTo(50, 600);
    ctx.lineTo(450, 600);
    ctx.lineTo(250, 600 - height);
    ctx.closePath();

    // the outline
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#666666';
    ctx.stroke();
}
drawTriangleBasic();
//function doesnt know mouse position
function fillerFunc(){
    var imgData = ctx.getImageData(0, 0, width, height);
        // value++;
    let pixelWidth = Math.floor(width);
        // //let pixelHeight = Math.floor(height);
    let pixelX = 0;
    let pixelY = 1;

    for (let i = 0; i < imgData.data.length; i += 4){
        pixelX++
        if (pixelX === pixelWidth){
            pixelX -= pixelWidth;
            pixelY++;
        }
        let red = imgData.data[i];
        let green = imgData.data[i + 1];
        let blue = imgData.data[i + 2]
        let pixelLog = {
            red : red,
            green : green,
            blue : blue,
            x : pixelX,
            y : pixelY
        };
        pixelArray.push(pixelLog);

    }

    let borderArray = [];
    let borders = [];
    for (let i = 0; i < pixelArray.length; i++){

        if ((pixelArray[i].red !== 255 
            || pixelArray[i].green !== 255
            || pixelArray[i].blue !== 255)){
            for (let j = 0; j < pixelWidth - pixelArray[i].x ; j++){
                let iteration = i + j;
                if ((pixelArray[iteration].red === 255 
                    && pixelArray[iteration].green === 255
                    && pixelArray[iteration].blue === 255)){

                    let forwardsBoolean = false;
                    let backwardsBoolean = false;
                    for (let k = 0 ; k < pixelWidth - pixelArray[iteration].x; k++){
                        let plusFromWhite = iteration + k;
                        if (pixelArray[plusFromWhite].red !== 255 
                            || pixelArray[plusFromWhite].green !== 255
                            || pixelArray[plusFromWhite].blue !== 255){
                                forwardsBoolean = true;
                                break;
                        }
                    }
                    if (forwardsBoolean === true){
                            ctx.fillStyle = 'green';
                            ctx.fillRect(pixelArray[iteration].x, pixelArray[iteration].y, 1, 1);
                        }
                }
            }
            i += pixelWidth - pixelArray[i].x;
            }
        }
}

fillerFunc();

填充逻辑说明 #

先查找非白色像素，再定位后续白色像素，若该白色像素前方存在非白色像素，则将其填充为绿色。

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