Question

我是疯了还是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（loop：

）

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

原因是rect添加到路径并累积。每次调用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();

这是html 5中的错误还是我疯了？

1 个答案: