使方块恢复原始状态

Question

我在此站点上找到了此代码，但是由于我是.js的新手，所以我无法确定将正方形恢复为其原始颜色的最佳实践。 即，单击一个正方形，它会更改颜色，再次单击，它会回到原来的状态。

我会吗

1. 只需在第二次单击上为正方形着色？ 要么
2. 将其他if语句放在某处？

    <script>

    function getSquare(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: 1 + (evt.clientX - rect.left) - (evt.clientX - rect.left)%10,
        y: 1 + (evt.clientY - rect.top) - (evt.clientY - rect.top)%10
    };
}

    function drawGrid(context) {
    for (var x = 0.5; x < 10001; x += 10) {
      context.moveTo(x, 0);
      context.lineTo(x, 10000);
}

    for (var y = 0.5; y < 10001; y += 10) {
      context.moveTo(0, y);
      context.lineTo(10000, y);
}

    context.strokeStyle = "#ddd";
    context.stroke();
}

    function fillSquare(context, x, y){
       context.fillStyle = "red";
       context.fillRect(x,y,9,9);

}

    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    drawGrid(context);

    canvas.addEventListener('click', function(evt) {
        var mousePos = getSquare(canvas, evt);
        fillSquare(context, mousePos.x, mousePos.y);
    }, false);

    </script>

Answer 1

首先，绘制先前的状态有些危险，因为有时您会“重影”。 但现在暂时忽略

回到您的问题，几乎总是取决于情况。

如果您的画布仅在用户交互时发生变化，则可以（应该）使用事件处理程序来触发绘制。 当您将其他动画设置为动画时，应拆分动画和值。 （requestAnimationFrame）但是这确实需要更多的工作，因为所有内容都应存储为变量。

您将需要在绘制代码中使用if语句，因为您需要确定何时着色以及何时不着色。

//https://jsfiddle.net/dgq9agy9/2/
function fillSquare(context, x, y){
    var imgd = context.getImageData(x, y, 1, 1);
    var pix = imgd.data;
    console.log("rgba="+pix[0]+"-"+pix[1]+"-"+pix[2]+"-"+pix[3]);
    if(pix[0]==0){
       context.fillStyle = "red";
       }else if(pix[0]==255){
        context.fillStyle = "black";}

context.fillRect(x,y,9,9);

}

在我的示例中，我检查您单击的像素是红色还是黑色，然后进行切换。 这是一个简单的解决方案，因为您不需要任何额外的变量，但是它不是很干净。

如果您想要一个干净的解决方案，则可以创建一个具有1或0值的2d数组，并根据数字绘制颜色。 但这需要很多/更多的工作。 就像将X，Y鼠标单击平移到第N个平方数一样。（类似这样：color_arr [x / 9] [y / 9]）