javascript - 绘制多个彼此相邻的旋转图像

Question

我试图在 HTML5 Canvas 上绘制多个彼此相邻的旋转图像，但不幸的是它们之间始终存在间隙:

我的想法是，我想使用图 block 绘制多个不同大小的 block 。每个单独的 block 都可以旋转。绘制这样一个 block 时，我调用 Canvas 的旋转函数一次，然后绘制所有相邻的瓷砖以形成这样一个 block 。

此时我真的不知道该怎么做才能解决这个问题。当然，我可以为每个单独的 block 使用屏幕外 Canvas ，但据我所知，这会在我的游戏中产生一些严重的性能问题，因为可能有很多这样的 block ，每个 block 都有自己的大小、方 block 和旋转。

另一种选择是使用模式，对于这个特定的场景，这是一个可行的选择。但不幸的是，我还需要在边缘上的瓷砖获得 different image 的地方绘制 block .

消除这些差距的好方法是什么？我可以在中间画额外的瓷砖来以一种有点古怪的方式填补空白吗？或者有没有我还没有想到的选项？

编辑: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)。这对于更大的图 block 也有更好的性能。

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

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