框填充当前颜色后如何更改描边颜色

Question

我有这个设计描述要创建：

第 1 步：默认 state 是白色背景上的类型。

第 2 步：Cursor 跟踪并绘制。

第三步：如果你把整个屏幕填成红色，那么 cursor 绘制变为白色。

第4步：你画白色。

第 5 步：如果您用绘图填充全屏，您将返回第 1 步，背景为全白。

我已经完成了第 2 步的任务，但是一旦整个屏幕都充满了红色，我就无法更改颜色。

简而言之，一旦用户用红色填充框，我想将颜色更改为白色。 以同样的方式，一旦盒子充满了白色，我想把它改回红色。

请检查codepen的代码 - https://codepen.io/chiragjain94/pen/dyOzqGy

<body onload="init()">
<canvas id="can" width="150" height="150" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>


<img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;">

window.onload = function() {
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");

// Fill Window Width and Height
myCanvas.width = window.innerWidth;
myCanvas.height = window.innerHeight;

// Set Background Color
ctx.fillStyle="#fff";
ctx.fillRect(0,0,myCanvas.width,myCanvas.height);

// Mouse Event Handlers
if(myCanvas){
    var isDown = false;
    var canvasX, canvasY;
    ctx.lineWidth = 5;
    
    $(myCanvas)
    .mousedown(function(e){
        isDown = true;
        ctx.beginPath();
        canvasX = e.pageX - myCanvas.offsetLeft;
        canvasY = e.pageY - myCanvas.offsetTop;
        ctx.moveTo(canvasX, canvasY);
    })
    .mousemove(function(e){
        if(isDown !== false) {
            canvasX = e.pageX - myCanvas.offsetLeft;
            canvasY = e.pageY - myCanvas.offsetTop;
            ctx.lineTo(canvasX, canvasY);
            ctx.strokeStyle = "#000";
            ctx.stroke();
        }
    })
    .mouseup(function(e){
        isDown = false;
        ctx.closePath();
    });
}

// Touch Events Handlers
draw = {
    started: false,
    start: function(evt) {

        ctx.beginPath();
        ctx.moveTo(
            evt.touches[0].pageX,
            evt.touches[0].pageY
        );

        this.started = true;

    },
    move: function(evt) {

        if (this.started) {
            ctx.lineTo(
                evt.touches[0].pageX,
                evt.touches[0].pageY
            );

            ctx.strokeStyle = "#000";
            ctx.lineWidth = 5;
            ctx.stroke();
        }

    },
    end: function(evt) {
        this.started = false;
    }
};

// Touch Events
myCanvas.addEventListener('touchstart', draw.start, false);
myCanvas.addEventListener('touchend', draw.end, false);
myCanvas.addEventListener('touchmove', draw.move, false);

// Disable Page Move
document.body.addEventListener('touchmove',function(evt){
    evt.preventDefault();
},false);
};

请提供您的宝贵建议，因为我在周日 EOD 之前有一个非常重要的截止日期。

Answer 1

您需要验证每个像素值并与红色或白色（RGB 值）进行比较。

使用 ctx.getImageData 获取颜色数组。 这个数组有一个长度 = 宽度 * 高度 * 4 大小，因为它保存了 4 个信息：r、g、b 和 a。 因此，使用 i+4 交互进行循环。 在交互中，您可以使用 i、i+1 和 i+2 来获得 r、g 和 b。

红色为 R=255, G=0, B=0 白色为 R=255, G=255, GB=255

    r = arrData.data[y];
    g = arrData.data[y + 1]
    b =arrData.data[y + 2]
    
    
    if( x == "red"){ 
    
    if(( r != 255) || ( g != 0) || (b!=0) ) {
    console.log( r, g, b)
    return;
    }
    
    }else{
    
    if(( r != 255) || ( g != 255) || (b!=255) )       {
    console.log( r, g, b)
    return;
    }
    
    }

看这个： https://codepen.io/Luis4raujo/full/rNWzPzO

如果此答案帮助您检查是否正确或投票！