Unerwünschte Zeilen, die in html5-Canvas mit Kacheln erscheinen

Question

Unerwünschte Zeilen, die in html5-Canvas mit Kacheln erscheinen

8

Ich zeichne eine Karte auf einer Leinwand mit Quadraten 40px * 40px. Alles ist gut, bis ich die Karte durch Verschieben der Leinwand (mit Hilfe der Transformation) durchblättere. Dann, aus dem Nichts, Linien zwischen den Fliesen. Siehe Bilder unten.

Warum?

javascript html5 canvas html5-canvas

Pedro 30.03.2012, 11:39

quelle

1 Antwort

Tags und Links javascript html5 canvas html5-canvas

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Chrome-Erweiterung: Blenden Sie das Browseraktions-Symbol ein und aus

score 15 · Accepted Answer

Dies sieht aus wie Gleitpunktpositionierung (z. B. Sie haben einen Bildlauf bis 100.5, 100.5) kombiniert mit bilinearer Filterung, die die meisten Browser verwenden, um Bilder auf der 2D-Leinwand anzuzeigen.

Grundsätzlich, wenn Sie Image () ein Bild zwischen Pixeln zeichnen, wird jedes Pixel über zwei Pixel geglättet, was bedeutet, dass die Kanten bei 50% Alpha über den Hintergrund gezeichnet werden. Dies unterbricht die Aufteilung, da die Kante der nächsten Fliese die gleiche ist und 50% Alpha über die 50% Alpha der anderen Fliese zieht, was 75% Alpha ergibt. Dies erscheint heller oder dunkler (abhängig von der Hintergrundfarbe) als der Rest der Kachel. So erhalten Sie "Nähte" entlang der Kanten der Fliesen.

Um zu beheben: Math.round () Ihr Bild koordiniert, sowie alle Anrufe zu übersetzen () (seit der Übersetzung um ein halbes Pixel hat den gleichen Effekt). Dies garantiert, dass alles in ein pixelorientiertes Raster gezeichnet wird und nie zusammenkommt.