Question

我写了一些代码可以这样工作：

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

我制作的代码应填充一条绿线，但奇怪的是它填满了整个圆圈。它还掩盖了我圈子的一些黑色轮廓。为什么会这样？我该如何解决这个问题？

洪水填充代码：

canvas.addEventListener（＆＃39;点击＆＃39;，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;
    }
}

完整代码：

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()以重置路径。如果没有这个电话，圆圈的路径也会变成绿色。
检查像素是否为黑色时，您需要查看 next 像素，而不是刚刚绘制的像素。使用
```
var imageData=ctx.getImageData(x-1,y,1,1);
```
或将减量操作移到此调用之前。
测试颜色时，还必须检查alpha（imageData.data[3]）是否为255。
如果x离开屏幕，我建议您终止循环，以防遇到黑色像素。

洪水补充代码奇怪地行事

1 个答案: