Это выглядит как позиционирование с плавающей точкой (например, вы прокрутили до 100,5, 100,5) в сочетании с билинейной фильтрацией, которую большинство браузеров используют для отображения изображений на 2D-холсте.
В основном, если вы рисуетеизображения между пикселями, каждый пиксель сглаживается на два пикселя, что означает, что края на 50% отображаются на фоне.Это разбивает плитку, потому что край следующей плитки одинаков, и рисует на 50% альфа по сравнению с 50% альфа другой плитки, что добавляет до 75% альфа.Это будет выглядеть светлее или темнее (в зависимости от цвета фона), чем остальная часть плитки.Таким образом, вы получаете «швы» по краям плиток.
Исправление: Math.round () координирует ваше изображение, а также любые вызовы translate () (так как перевод на полпикселя имееттот же эффект).Это гарантирует, что все отрисовывается по сетке с выравниванием по пикселям и никогда не сшивается.