将多个旋转图像彼此相邻绘制

Question

我试图在HTML5画布上彼此相邻地绘制多个旋转图像，但遗憾的是它们之间始终存在差距：

我的想法是我想使用瓷砖绘制多个不同大小的块。每个单独的块可以旋转。在绘制这样一个块时，我会调用画布的旋转功能一次，然后将所有的拼贴画在彼此旁边以形成这样的块。

此时此刻，我真的不知道如何解决这个问题。当然，我可以为每个单独的块使用屏幕外画布，但据我所知，这将在我的游戏中产生一些严重的性能问题，因为可能有很多这些块，每个块都有自己的大小，平铺和旋转。

另一个选择是使用模式，对于这个特定的场景，这将是一个可行的选择。但不幸的是，我还需要绘制边框上的图块为different image的块。

摆脱这些差距的好方法是什么？我应该在中间画出额外的瓷砖，以一种黑客的方式填补空白。或者有没有我想过的选择呢？

修改 JSFiddle：https://jsfiddle.net/Oli414/oxap9fgr/2/（它一般适用于绘图，而不仅仅是图像）。

ctx.rotate(rotation * Math.PI / 180);
for (var i = 0; i < width; i++)
{
    for (var j = 0; j < height; j++)
  {
        ctx.fillRect(i * tileSize, j * tileSize, tileSize, tileSize);
  }
}

Answer 1

步骤：

1：使用ctx.createPattern（Image，wrap）创建一个带图像的fillStyle，并将wrap设置为“repeat”（不要忘记在图像加载之前等待。

2：不要在单独的drawImage调用中绘制每个图像，只需使用ctx.fillRect（beginX，beginY，width，height）。对于较大的瓷砖，这也有更好的性能。

图像之间不应有任何间隙。

如果您不喜欢这个想法，那么您可以在每个方向上将图像超大1个像素。