Javascript 洪水填充代码运行异常

我写了一些代码如下：

• 通过e.layerX/y使用变量x和y抓取单击的点

• x值将减少1，并检查画布颜色是否为黑色

• 如果是黑色，它将停止，否则将继续

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

洪水填充代码：

canvas.addEventListener（'click'，fillit，false）

完整代码：

css:

html:

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

• 在绘制绿色像素之前调用

  ctx.beginPath（）

  重置路径。如果没有这个呼叫，圆圈的路径也会充满绿色

• 当检查像素是否为黑色时，您需要查看下一个像素，而不是刚刚绘制的像素。使用

  var imageData=ctx.getImageData(x-1,y,1,1);
  

  或将递减操作移动到此调用之前

• 测试颜色时，还必须检查alpha（

  imageData.data[3]

  ）是否为255

• 如果

  x

  在没有遇到黑色像素的情况下离开屏幕，我建议您终止循环

哎哟！因为（；）有点痒！而是使用：do{…；}while（条件）；另外，在检索画布之后只需检索一次ctx，并具有一个处理鼠标的函数，然后调用一个预期（x，y）的填充函数。（重构是一种调试方式）

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

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;

var imageData=ctx.getImageData(x-1,y,1,1);