Question

我在这个网站上找到了这个代码，但是因为我是.js的新手，所以我无法理解将广场恢复到原始颜色的最佳做法。即，点击它改变颜色的方块，再次点击它会回到原来的状态。

我

只需在第二次点击时为方块着色？或
在某个地方放了一个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值的二维数组，并根据数字绘制颜色。但这需要更多/更多的工作。像翻译一样，X，Y鼠标点击到第N个方格。（类似这样：color_arr [x / 9] [y / 9]）

将方块返回原始状态

1 个答案: