Rysuję mapę na płótnie za pomocą kwadratów o wielkości 40 pikseli * 40 pikseli. Wszystko jest dobrze, dopóki nie zignoruję płótna (używając transformacji), przewiń mapę. Następnie, znikąd, między płytkami pojawiają się linie. Zobacz zdjęcia poniżej.Niechciane linie pojawiające się w płótnie html5 przy użyciu kafelków
Dlaczego?
To wygląda zmiennoprzecinkowej pozycjonowania (np masz przewijane do 100,5, 100,5) w połączeniu z bilinear filtrowanie większość przeglądarek użyć do wyświetlania obrazów na płótnie 2D.
Zasadniczo, jeśli rysujesz obraz() pomiędzy pikselami, każdy piksel jest wygładzany na dwa piksele, co oznacza, że krawędzie rysują 50% alfa w tle. Przerywa to układanie płytek, ponieważ krawędź następnej płytki jest taka sama, i rysuje 50% alfa w stosunku do alfa drugiej płytki o 50%, co daje do 75% alfa. To będzie jaśniejsze lub ciemniejsze (w zależności od koloru tła) niż reszta płytki. Otrzymujesz "szwy" wzdłuż krawędzi płytek.
Aby naprawić: Math.round() Twoje obrazy są skoordynowane, a także wszelkie wywołania do translate() (ponieważ tłumaczenie przez pół piksela ma taki sam efekt). Gwarantuje to, że wszystko zostanie narysowane na siatce wyrównanej pikselami i nigdy bez szwów.
Tak, znalazłem to samo w rzeczywistości - a twoja odpowiedź jest trafna. Okazuje się, że jeśli użyjesz czegoś innego niż liczbę całkowitą, aby zrównoważyć płótno, te linie będą się pojawiać. Po prostu użyłem Math.floor (offsetX) i rozwiązałem problem. – Pedro
Math.round rozwiązał problem także dla mnie. Ratownik! Dzięki! – masnun
Fragment kodu będzie użyteczny –