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

【问题标题】：How to change Stroke color once the box is filled with current color框填充当前颜色后如何更改描边颜色
【发布时间】：2021-05-23 11:16:52
【问题描述】：

我要创建这个设计说明：

第 1 步：默认状态是在白色背景上键入。

第 2 步：光标轨迹然后绘制。

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

第 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 之前完成。

【问题讨论】：

标签： javascript html canvas html5-canvas 2d

【解决方案1】：

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

使用 ctx.getImageData 获取颜色数组。这个数组有一个长度 = 宽度 * 高度 * 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, g, b)
    return;
    }
    
    }else{
    
    if(( r != 255) || ( g != 255) || (b!=255) )       {
    console.log( r, g, b)
    return;
    }
    
    }

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

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

【讨论】：