लाइन टू() आंतरिक पिक्सल क्यों बदलता है? <img src="https://i.stack.imgur.com/fKkED.png" alt="pixel lightening"></p> <p>बनाया गया पहला आकृति के अंदर उन पिक्सल हल्का कर रहे हैं:

Question

यह स्थिति स्पष्ट है, तो मुझे एक तस्वीर के साथ उदाहरण देकर स्पष्ट करने देने के लिए मुश्किल है। स्क्रीन को काले रंग से साफ़ किया गया है, लाल और हरे रंग के बक्से खींचे जाते हैं, फिर पथ खींचा जाता है। here के रूपरेखा के कारणों के लिए, अब तक एकमात्र फिक्स जो मैंने पाया है, बॉक्स की रेखा चौड़ाई को 2 पिक्सल तक सेट कर रहा था।

sctx.save(); 
sctx.strokeStyle = this.color; 
sctx.lineWidth = this.width; 
sctx.beginPath(); 
sctx.moveTo(this.points[0].x, this.points[0].y); 
for (var i = 1; i < this.points.length; i++) 
{ 
    sctx.lineTo(this.points[i].x, this.points[i].y); 
} 
sctx.closePath(); 
sctx.stroke(); 
sctx.restore(); 

और लाइनों:

sctx.save(); 
sctx.strokeStyle = 'orange'; 
sctx.lineWidth = 5; 
console.log(sctx); 
sctx.beginPath(); 
sctx.moveTo(this.points[0].x, this.points[0].y); 
for (var i = 1; i < this.points.length; i++) 
{ 
    sctx.lineTo(this.points[i].x, this.points[i].y); 
} 
sctx.closePath(); 
sctx.stroke(); 
sctx.restore(); 

और एक ही स्थिति है जहाँ बक्से 2px चौड़ाई में तैयार कर रहे हैं की एक तस्वीर:

यहाँ कोड वर्गों आकर्षित करने के लिए इस्तेमाल किया जा रहा है

lineTo() शायद अल्फा मूल्यों के साथ गड़बड़ कर रहा है? कोई भी मदद बहुत ही सराहनीय होगी।

संपादित करें: स्पष्ट करने के लिए, वही बात तब होती है जब sctx.closePath(); खींचे जाने वाले पथ से छोड़ा जाता है।

Answer 1

ऐसा प्रतीत होता है कि यह वर्तमान में अनियंत्रित प्रतिपादन बग है कि किसी भी कारण से सभी प्लेटफ़ॉर्म पर दिखाई देता है। इसके बारे में बहुत कम जानकारी है, और आशा है कि एचटीएमएल 5 आधिकारिक मानक होने से पहले इसमें भाग लिया जाएगा।

एक कामकाज के रूप में, lineTo() का उपयोग न करें, एकल लाइनों के एकाधिक सेट का उपयोग करें।

Answer 2

मान लें कि आपके पास है: http://jsfiddle.net/g3Kvw/ जैसा कि आप देख सकते हैं कि यह 2px चौड़ा लगता है। लेकिन यदि आप इसे lineTo() के बजाय fillRect() का उपयोग करने के लिए बदलते हैं, तो आपके पास http://jsfiddle.net/g3Kvw/1/ है जो अच्छा दिख रहा है।

समस्या: आप ऐसा कुछ नहीं कर पाएंगे जो इस विधि के साथ आयत नहीं है।

लेकिन, यदि आप प्रत्येक int समन्वय (x, y) के लिए 0.5 योग करते हैं: http://jsfiddle.net/g3Kvw/3/ आपको नियमित रेखा मिल जाएगी।

मुझे लगता है कि यह एफएफ & वेबकिट पर कुछ प्रकार की एंटीअलाइजिंग गणना बग है ... लेकिन मुझे इसे बग ट्रैकर में नहीं मिला, और यह "अजीब" समाधान संख्या को फ्लोट करने के लिए, एक ठोस रेखा काफी उलझन में है। क्योंकि पूर्णांक का उपयोग करना पर्याप्त होना चाहिए।