洪水填埋码行为奇怪

Question

我编写了一些代码，其工作方式如下：

• 使用变量x和y通过e.layerX/y获取单击点。
• X值将减少1，并检查画布颜色是否为黑色。
• 如果是黑色，它就会停止，否则会继续。

我编写的代码应该填充一条绿色的线条，但奇怪的是，它填充了整个圆圈。它也掩盖了我的圆圈的一些黑色轮廓。为什么会这样呢？我怎么才能解决这个问题？

洪水填埋场代码：

Canvas.addEventListener(点击，填充，假)；

function fillit(e) {
    var ctx = canvas.getContext('2d');
    var x = e.layerX;
    var y = e.layerY;

    for (;;) {
        ctx.fillStyle = "green";
        ctx.fillRect(x, y, 1, 1);
        ctx.fill();
        var imageData = ctx.getImageData(x, y, 1, 1);
        if (imageData.data[0] == 0 && imageData.data[1] == 0 && imageData.data[2] == 0) {
            break;
        }
        x = x - 1;
    }
}

完整法典：

css：

    #mycircle{position:fixed;top:600px;left:0px;}
    #vanishmycircle{position:fixed;top:600px;left:100px;}

html：

    <form>
        <input id="mycircle" type="button" value="make a circle"> <input id=
        "vanishmycircle" type="button" value="delete a circle">
    </form>

javascript：

function makeit() {
    var canvas = document.createElement('canvas');
    var atts = document.createAttribute('style');
    canvas.height = 400;
    canvas.width = 400;

    atts.value = "border:1px solid black;";
    canvas.setAttributeNode(atts);

    document.body.appendChild(canvas);
    document.getElementById('mycircle').addEventListener('click', acircle, false);
    document.getElementById('vanishmycircle').addEventListener('click', notacircle, false);

    function acircle(event) {
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.lineWidth = 10;
        ctx.strokeStyle = "black";
        ctx.arc(150, 150, 125, 0, 2 * Math.PI);
        ctx.stroke();
    }

    function notacircle(event) {
        var ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, 400, 400);
    }
    canvas.addEventListener('click', fillit, false);

    function fillit(e) {
        var ctx = canvas.getContext('2d');
        var x = e.layerX;
        var y = e.layerY;

        for (;;) {

            ctx.fillStyle = "green";
            ctx.fillRect(x, y, 1, 1);
            ctx.fill();
            var imageData = ctx.getImageData(x, y, 1, 1);
            if (imageData.data[0] == 0 && imageData.data[1] == 0 && imageData.data[2] == 0) {
                break;
            }
            x = x - 1;
        }
    }
}
window.onload = makeit;

Answer 1

• 在绘制绿色像素以重置路径之前调用ctx.beginPath()。如果没有这个调用，圆圈的路径也会充满绿色。
• 在检查像素是否为黑色时，您需要查看下一个像素，而不是刚刚绘制的像素。使用 var imageData=ctx.getImageData(x-1，y,1,1)； 或将减量操作移至此调用之前。
• 在测试颜色时，还必须检查alpha (imageData.data[3])为255。
• 我建议您在x关闭屏幕时终止循环，以防遇到黑色像素。