Нежелательные линии, появляющиеся на холсте html5 с использованием плиток

Это похоже на позиционирование с плавающей запятой (например, вы прокрутили до 100,5, 100,5) в сочетании с билинейной фильтрацией, которую большинство браузеров используют для отображения изображений на 2D-холсте.

По сути, если вы drawImage () изображение между пикселями, каждый пиксель сглаживается на два пикселя, что означает, что края рисуются с альфа-каналом 50% над фоном. Это нарушает тайлинг, потому что край следующего тайла такой же, и рисует с альфой 50% по сравнению с 50% альфа другого тайла, что в сумме дает 75% альфа. Это будет выглядеть светлее или темнее (в зависимости от цвета фона), чем остальная часть плитки. Так у вас получатся «швы» по краям плитки.

Чтобы исправить: Math.round () координаты вашего изображения, а также любые вызовы translate () (поскольку перевод на полпикселя имеет тот же эффект). Это гарантирует, что все будет нарисовано в сетке с выравниванием по пикселям и никогда не будет швов.