タイルを使用してhtml5キャンバスに表示されない不要な線

Question

私は40px * 40pxの正方形を使ってキャンバス上に地図を描画しています。 キャンバスをオフセット（変換を使用）してマップをスクロールするまで、すべてがうまくいきます。そして、どこかで、タイルの間に線が現れます。下の画像を参照してください。

なぜですか？これは、浮動小数点の位置のように見えます

Answer 1

はバイリニアはほとんどのブラウザは、2Dキャンバスに画像を表示するために使用するフィルタリングと組み合わせて（例えば、あなたは100.5、100.5にスクロールしました）。

基本的に、ピクセル間に画像を描画すると、すべてのピクセルが2つのピクセルにわたってスムージングされます。つまり、エッジは背景に対して50％のアルファで描画されます。これは、次のタイルのエッジが同じであるためタイル張りを破り、50％のアルファを他のタイルの50％のアルファに描画します。これにより最大75％のアルファが追加されます。タイルの残りの部分よりも明るくまたは暗く（背景色に応じて）表示されます。だから、あなたはタイルの端に沿って "縫い目"を取得します。

Math.round（）の画像座標と、translate（）への呼び出し（半画素の平行移動は同じ効果があるため）を修正します。これにより、すべてがピクセルで整列されたグリッドに描画され、継ぎ目がないことが保証されます。