множественных Drawing повернутых изображений рядом друг с другим

Question

Я пытаюсь нарисовать несколько повернутых изображения рядом друг с другом на холсте HTML5, но, к сожалению, всегда есть разрыв между ними:

Идея заключается в том что я хочу нарисовать несколько блоков разных размеров, используя плитки. Каждый отдельный блок может вращаться. При рисовании такого блока я вызываю функцию поворота холста один раз, чтобы затем нарисовать все плитки рядом друг с другом, чтобы сформировать такой блок.

На данный момент я не знаю, что делать, чтобы решить проблему. Конечно, я мог бы использовать экранный холст для каждого отдельного блока, но, насколько мне известно, это создаст серьезные проблемы с производительностью в моей игре, так как может быть много этих блоков, каждый со своими размерами, черепицей и вращением.

Другим вариантом было бы использовать шаблоны для этого конкретного сценария, который был бы жизнеспособным вариантом. Но, к сожалению, мне также нужно нарисовать блоки, где плитки по краям получат different image.

Что было бы хорошим способом избавиться от этих пробелов? Должен ли я просто нарисовать дополнительные плитки между ними, чтобы заполнить пробелы немного взломанным способом. Или есть вариант, о котором я еще не думал?

Edit: 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 .: Создать FillStyle с изображением, используя ctx.createPattern (изображение, обертывание), и установите обертку как «повторить» (Не забудьте ждать перед изображением грузы.

2 .: Вместо рисования каждое изображение в отдельном вызове DrawImage, просто используйте ctx.fillRect (beginX, beginY, ширина, высота). Это также имеет лучшую производительность для больших плиток.

Там не должно быть пробелов между изображениями.

Если вам не нравится эта идея, вы можете просто увеличить изображение на 1 пиксель в каждом направлении.