2012-03-30 9 views
8

Kareler üzerinde bir harita çiziyorum 40px * 40px. Her şey, ben tuvali dengeleyerek (dönüştürme kullanarak), haritayı kaydırın. Sonra, hiçbir yerde, çizgiler arasında çizgiler belirmez. Aşağıdaki resimlere bakın.Fayans kullanılarak html5 tuvalinde görünen istenmeyen çizgiler

Neden? Bu kayan nokta konumlandırma benziyor

Canvas drawn, but no offset yet. All is fineCanvas drawn w offset, now where did those lines come from?

+0

Kodunuzun bir parçası yararlı olacaktır –

cevap

15

çiftdoğrusal çoğu tarayıcı 2D tuval üzerine görüntülemek için kullandıkları filtreleme ile kombine (örneğin, kısa 100,5, 100,5 kaydırıldığında ettik).

Temel olarak, pikseller arasında bir görüntü çizerseniz() piksel, her piksel iki pikselin üzerine düzeltilir, yani kenarlar arka plan üzerinde% 50 alfa ile çizilir. Bu, bir sonraki döşemenin kenarı aynı olduğundan ve diğer döşemenin% 50 alfadan% 50 alfaya kadar% 50 alfa harcadığından, döşeme kırılır. Bu, karoun geri kalanından daha açık veya daha koyu (arka plan rengine bağlı olarak) görünecektir. Böylece fayansların kenarları boyunca "dikişler" elde edersiniz.

Düzeltmek için: Math.round() görüntü koordinatlarınızın yanı sıra, herhangi bir çevirme() çağrısı (yarım pikselle çeviri yaptığından aynı etkiye sahip olduğu için). Bu, her şeyin pikselle hizalanmış bir ızgaraya çizildiğini ve asla dikişlenmeyeceğini garanti eder.

+0

Evet, bunu aslında kendim buldum - ve cevabınız açık. Tuvali dengelemek için bir tamsayıdan başka bir şey kullanırsanız ortaya çıkar, bu çizgiler apaçıktır. Bu yüzden sadece bir Math.floor (ofsetX) kullandım ve sorunu çözdüm. – Pedro

+0

Math.round sorunu benim için de çözdü. Cankurtaran! Teşekkürler! – masnun