javascript - 这是html 5中的bug还是我发疯了？

我是生气还是以下html 5中的错误？

我正在编写类似“游戏地图”的代码。它真的很简单，这里是绘图代码：

g2d.clearRect(0, 0, width, height);
            for(var i = minx; i < maxx; i++){
                for(var j = miny; j < maxy; j++){
                    var drawx = i * tileWidth + posx;
                    var drawy = j * tileHeight + posy;
                    g2d.drawImage(images["image0"], drawx, drawy);
                    g2d.fillText("x: " + i, drawx + 3, drawy + 10);
                    g2d.fillText("y: " + j, drawx + 3, drawy + 20);
                    g2d.rect(drawx, drawy, tileWidth, tileHeight);
                    g2d.stroke();
                }
            }
            for(var i = 0; i < bases.length; i++){
                var position = bases[i]["position"].split(":");
                var x = parseInt(position[0]);
                var y = parseInt(position[1]);
                g2d.drawImage(images["image1"], x * tileWidth + posx, y * tileHeight + posy);
            }

没什么特别的，只是一个网格，然后基于它们的位置。
在此演示中，您可以使用鼠标将其拖动：

link

现在：我想添加一个网格，以便添加框，以便于调试。
所以我将其添加到for（for（循环：

g2d.rect(drawx, drawy, tileWidth, tileHeight);
                    g2d.stroke();

在fillText（）之后突出。
结果是可耻的：

link

它滞后，似乎没有清除的东西。
那里怎么了？
有人知道如何解决这个问题吗？

谢谢！

最佳答案

转这个：

g2d.rect(drawx, drawy, tileWidth, tileHeight);
g2d.stroke();

变成：

g2d.strokeRect(drawx, drawy, tileWidth, tileHeight);

而且您不会遇到路径问题（以一点点性能为代价）。或者，在开始循环之前使用beginPath()。

原因是矩形添加到路径并累积。每次调用stroke（）时，路径中的所有内容都会重绘。 beginPath（）将清除路径，而strokeRect（）是直接栅格化的方法，不会添加到路径中。

例：

g2d.beginPath();
for(var i = minx; i < maxx; i++){
    for(var j = miny; j < maxy; j++){
        var drawx = i * tileWidth + posx;
        var drawy = j * tileHeight + posy;
        g2d.drawImage(images["image0"], drawx, drawy);
        g2d.fillText("x: " + i, drawx + 3, drawy + 10);
        g2d.fillText("y: " + j, drawx + 3, drawy + 20);
        g2d.rect(drawx, drawy, tileWidth, tileHeight);
    }
}
g2d.stroke();

关于javascript - 这是html 5中的bug还是我发疯了？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23061794/