टाइल

Question

का उपयोग कर एचटीएमएल 5 कैनवास में अनचाहे लाइनें दिखाई दे रही हैं मैं वर्ग 40px * 40px का उपयोग कर कैनवास पर एक नक्शा खींच रहा हूं। सभी तब तक ठीक है जब तक मैं कैनवास को ऑफ़सेट करके (ट्रांसफॉर्म का उपयोग करके) मानचित्र को स्क्रॉल करता हूं। फिर, कहीं से बाहर, टाइल्स के बीच लाइनों apear। नीचे छवियों को देखें।

क्यों?

Answer 1

यह फ्लोटिंग प्वाइंट स्थिति की तरह लग रहा द्विरेखीय छानने अधिकांश ब्राउज़र 2D कैनवास पर छवियों को प्रदर्शित करने के लिए उपयोग के साथ संयुक्त (जैसे आप 100.5, 100.5 करने के लिए स्क्रॉल किया गया है)।

असल में, यदि आप पिक्सेल के बीच छवि को चित्रित करते हैं, तो प्रत्येक पिक्सेल दो पिक्सल पर चिकना होता है, जिसका अर्थ है कि किनारों पर पृष्ठभूमि पर 50% अल्फा खींचती है। यह टाइलिंग तोड़ता है, क्योंकि अगला टाइल का किनारा वही होता है, और अन्य टाइल के 50% अल्फा पर 50% अल्फा खींचता है, जो 75% अल्फा जोड़ता है। यह शेष टाइल की तुलना में हल्का या गहरा (पृष्ठभूमि रंग के आधार पर) दिखाई देगा। तो आपको टाइल्स के किनारों पर "सीम" मिलती है।

ठीक करने के लिए: Math.round() आपकी छवि समन्वय, साथ ही अनुवाद करने के लिए किसी भी कॉल() (आधा पिक्सेल द्वारा अनुवाद करने के बाद से एक ही प्रभाव है)। यह गारंटी देता है कि सबकुछ एक पिक्सेल-गठबंधन ग्रिड पर खींचा जाता है और कभी भी सीम नहीं होता है।