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

Question

我要创建这个设计说明：

第 1 步：默认状态为白色背景文字。

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

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

第 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,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获取颜色数组。这个数组有一个 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, g, b)
    return;
    }
    
    }else{
    
    if(( r != 255) || ( g != 255) || (b!=255) )       {
    console.log( r, g, b)
    return;
    }
    
    }

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

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

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

How to change Stroke color once the box is filled with current color

html

javascript

2d

canvas

html5-canvas