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

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

我要创建此设计说明：

第 1 步：默认状态为白底文字。

第 2 步：光标跟踪并绘制。

第 3 步：如果将整个屏幕填满红色，则光标绘制变为白色。

第 4 步：您用白色绘制。

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

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

简而言之，一旦用户用红色填充框，我想将颜色更改为白色。以同样的方式，一旦框被填充为白色，我想将其改回红色。

请检查代码笔中的代码 - 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,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 之前完成。

解决方法

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

使用 ctx.getImageData 获取颜色数组。这个数组有一个 length = width * height * 4 大小，因为它保存了 4 个信息：r,g,b 和所以用 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,b)
    return;
    }
    
    }else{
    
    if(( r != 255) || ( g != 255) || (b!=255) )       {
    console.log( r,b)
    return;
    }
    
    }

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

如果这个答案可以帮助您检查正确或投票！