这是一个bug在html 5或我是疯了吗？ [英] Is this a bug in html 5 or am i mad?

问题描述

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

Im编码类似游戏地图。它真的很简单，这里是绘图代码：

  g2d.clearRect（0，0，width，height） 
 for（var i = minx; i  for（var j = miny; 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）; 
} 
  

它没什么特别的，只是一个网格，然后它们的位置的基础。
这是一个演示，你可以用鼠标拖动它：

链接

现在：我想添加一个网格，以便于调试。
所以我添加这行代码在for（for（for：for（for： drawy，tileWidth，tileHeight）;
g2d.stroke（）;

（）stuff。
结果是一个耻辱：

链接

它滞后，看起来像东西不清算
在那里有什么？

谢谢！

解决方案

p>转动：

  g2d.rect（drawx，drawy，tileWidth，tileHeight）; 
 g2d.stroke ）; 
  

into：

  g2d.strokeRect（drawx，drawy，tileWidth，tileHeight）; 
  

你不会有路径问题（以牺牲性能为代价）。或者在开始循环之前使用 beginPath（）。

原因是，rect添加到路径和累加。每次stroke（）被调用，路径中的所有内容都被重绘。

例如：

（）方法：beginPath（）会清除路径，而strokeRect（）是一个不加入路径的直接光栅化方法。

  g2d.beginPath（）; 
 for（var i = minx; i  for（var j = miny; 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（）; 
  

Am i mad or is the following a bug in html 5?

Im coding something like a "game map". Its really simple, here the drawing code:

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

its nothing special, just a grid and then the bases on their positions. Here a demo, you can drag it around with the mouse:

link

Now: I wanted to add a grid, so boxes, for easy debugging. So i added this to lines of code in the for(for( loop:

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

juts after the fillText() stuff. The result is a shame:

link

Its lagging around and it seems like the stuff isnt clearing. Whats up there? Anyone an idea how to fix this??

Thank you!

解决方案

Turn this:

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

into:

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

and you won't have problems with path (at the cost of a tad performance). Alternatively use beginPath() before you start the loop.

The reason is that the rect adds to the path and accumulates. Everytime stroke() is called everything in the path is redrawn. beginPath() will clear the path while strokeRect() is a direct rasterized method which doesn't add to the path.

Example:

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

这篇关于这是一个bug在html 5或我是疯了吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！