使方块恢复原始状态

Question

I found this code on this site, but as I'm a novice with .js, I can't get my head around what the best practice would be to return a square to its original colour. ie, click on a square it changes color, click again it goes back to what it was.

Do I

1. just color the square on a second click? or
2. put an else if statement somewhere?

    <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

First of all it's a bit dangerous to draw over a previous state, because sometimes you get 'ghosting'. but ignores this for now

And to get back to your questions, as nearly always it depends on the situation.

If you have a canvas that only changes when a user interacts you can (should) use an event handler to trigger a draw. When you have other things animated you should split animation and values. (requestAnimationFrame) This does however require more work since everything should be stored as a variable.

You are going to need an if statement in the draw-code becaus you need to determine when it's colored and when not.

//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);

}

In my example I check if the pixel you clicked is red or black and switch them. This is an easy solution because you don't need any extra variables, but it's not very clean.

If you want a clean solution, you could create an 2d-array with 1 or 0 values and draw a color depending on the number. But this requires alot/more work. Like translation the X,Y mouse click to the N-th number of square.(something like this: color_arr[x/9][y/9])