अजीब एचटीएमएल 5 कैनवास एंटीअलाइजिंग

Question

मैं कैनवास तत्व के साथ खेल रहा हूं और पाया कि जब मैं एक दूसरे के बगल में एनएक्सएन वर्दी ठोस रंगीन कोशिकाओं को खींचने का प्रयास करता हूं, तो कुछ चौड़ाई/ऊंचाई कॉन्फ़िगरेशन में, धुंधली सफेद-आश रेखाएं होती हैं उन्हें।

उदाहरण के लिए, यह कैनवास काला दिखता है लेकिन इसमें ग्रिड शामिल है जो मैं ब्राउज़र में दोषपूर्ण एंटीअलाइजिंग का परिणाम होने का अनुमान लगाता हूं।

पर्याप्त कहने के लिए, इस बग केवल में कुछ विन्यास दिखाई देता है, लेकिन मैं अच्छे के लिए यह से छुटकारा पाने के लिए करना चाहते हैं। क्या इसे रोकने के लिए कोई रास्ता है? क्या आपको कभी कैनवास में एंटीअलाइजिंग के साथ समस्याएं हैं?

मैंने this fiddle बनाया है जो इस मुद्दे को प्रदर्शित करता है और आपको कैनवास के आयामों और कोशिकाओं की संख्या के साथ खेलने की अनुमति देता है। इसमें कोड भी शामिल है जो मैं कोशिकाओं को आकर्षित करने के लिए उपयोग करता हूं, ताकि आप इसका निरीक्षण कर सकें और मुझे बता सकें कि मैं कुछ गलत कर रहा हूं।

var ctx = canvas.getContext('2d'); 
ctx.clearRect(0, 0, canvasWidth, canvasHeight); 
for (var i = 0; i < numberOfCells; ++i) { 
    for (var j = 0; j < numberOfCells; ++j) { 
    ctx.fillStyle = '#000'; 
    ctx.fillRect(j * cellWidth, i * cellHeight, cellWidth, cellHeight); 
    } 
} 

अग्रिम धन्यवाद,

पेट्र।

Answer 1

पढ़ने और कई दृष्टिकोणों को आजमाने के बाद, मैंने अपने आप के साथ आने का फैसला किया है। मैंने एक और (आभासी) कैनवास बनाया है जिसमें ग्रिड में कोशिकाओं की संख्या के अनुरूप पूर्णांक आयाम थे।

वहां सभी कोशिकाओं को चित्रित करने के बाद, मैं मुख्य कैनवास पर context.drawImage() पर कॉल करता हूं और वर्चुअल कैनवास को ऑफ़सेट और स्केल पैरामीटर के साथ एक तर्क के रूप में पास करता हूं ताकि यह मेरे चित्र को आराम से फिट कर सके। यह मानते हुए कि ब्राउज़र वर्चुअल कैनवास की छवि को पूरी तरह से स्केल करेगा (और व्यक्तिगत कोशिकाओं के रूप में नहीं), मैं अवांछित विभाजक लाइनों से छुटकारा पाने की उम्मीद कर रहा था।

मेरे प्रयासों के बावजूद, लाइनें अभी भी वहां हैं। कोई सुझाव?

यहाँ बेला मेरी तकनीक का प्रदर्शन है: https://jsfiddle.net/ngxjnywz/5/

Answer 2

jsFiddle: https://jsfiddle.net/ngxjnywz/2/

जावास्क्रिप्ट

var cellWidth = Math.ceil(canvasWidth/numberOfCells); 
var cellHeight = Math.ceil(canvasHeight/numberOfCells); 

चौड़ाई, ऊँचाई पर निर्भर करता है के स्निपेट और अपने numberOfCells आप कभी कभी एक हो रही है ..., का कहना है कि 4.2 जो है 4 की सुविधा देता है लेकिन यह प्रदर्शित किया जाएगा गलत और एक पिक्सेल खाली रेखा दिखाई देने की अनुमति देगा। तो आपको बस इतना करना है कि Math.ceil फ़ंक्शन का उपयोग करें और इससे आपकी सेलविड्थ और सेलहेइट हमेशा उच्च संख्या होगी और आपको

Answer 3

सबसे अच्छा समाधान 0.5 पिक्सेल चौड़ा स्ट्रोक जोड़ने के लिए सबसे अच्छा समाधान है सभी भरें, एक ही शैली का उपयोग करके भरें और सभी ड्राइंग को ऑफ़सेट करें ताकि आप ऊपरी बाईं ओर पिक्सेल के केंद्र में प्रस्तुत कर सकें।

यदि आप स्केलिंग या अनुवाद जोड़ते हैं तो आपको निर्देशांक समायोजित करना होगा ताकि आप अभी भी अपने ड्राइंग निर्देशांक के लिए केंद्र दें।

अंत में आप केवल कलाकृतियों को कम कर सकते हैं लेकिन कई स्थितियों के लिए आप उन्हें पूरी तरह से हटा नहीं पाएंगे।

यह उत्तर आपको दिखाता है कि एक अप्रतिबंधित कैनवास के लिए कलाकृतियों को कैसे हटाया जाए। How to fill the gaps