javascript - 这是 html 5 中的错误还是我生气了？

Question

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

我正在编码类似“游戏 map ”的东西。很简单，这里是绘图代码:

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

它很滞后，而且似乎东西没有清理干净。 那里怎么了？ 有人知道如何解决这个问题吗？

谢谢!

Answer 1

转动这个:

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

进入:

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

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

原因是矩形添加到路径中并累积。每次调用Stroke()时，路径中的所有内容都会被重新绘制。 beginPath() 将清除路径，而中风矩形() 是直接光栅化方法，不会添加到路径。

示例:

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();