返回正方形到原始状态

Question

我在这个网站上找到了这段代码，但由于我是一个使用.js的新手，我无法理解将正方形返回其原始颜色的最佳实践是什么。比如，点击一个正方形，它会改变颜色，再点击一次，它会变回原来的颜色。

我要

1. 只是颜色的正方形在第二次点击?或
2. 在某处放置else 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

首先，绘制之前的状态有点危险，因为有时你会出现"重影"。但是现在忽略这个

回到你的问题上来，几乎总是要视情况而定。

如果你有一个只在用户交互时改变的画布，你可以(应该)使用事件处理程序来触发绘制。当你有其他动画时，你应该把动画和值分开。然而，这确实需要更多的工作，因为所有东西都应该存储为一个变量。

在绘制代码中你需要一个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])