एचटीएमएल 5, कैनवास, और स्ट्रोकआरक्ट: रेखाएं संकुचित?

Question

एक बेवकूफ सरल कैनवास उपयोग:

इस क्यों होता है:

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

ctx.strokeStyle = "#CCCC00"; 
ctx.lineWidth = 3; 
ctx.strokeRect(0, 0, width, height); 

ऊपर और दाईं ओर स्थित संकरा लाइनों के साथ एक आयत पैदावार? क्या मुझे पैडिंग के साथ ऑफसेट करने की ज़रूरत है? यह खीझ दिलाने वाला है।

Answer 1

2 बातें।

सबसे पहले, विषम लाइनविड्थ (1, 3, 5, ...) पूर्णांक पूर्णांक पिक्सेल मानों पर खींचे गए साथ कभी भी लागू नहीं होंगे। ऐसा इसलिए है क्योंकि एक्स और वाई अपने केंद्रों की बजाय पिक्सेल के बीच की जगह को संदर्भित करते हैं। तो 1 का एक स्ट्रोक [1,1] से [1,10] तक चलता है आधा पिक्सेल के बाएं कॉलम पर पिक्सेल में आधा और दाएं से दाएं। यदि आप उस पंक्ति को [1.5,1] से [1.5,10] तक खींचते हैं तो यह बाएं आधे से बाएं और दाएं से दाएं भरता है, पूरे पिक्सेल कॉलम को पूरी तरह से भरता है।

कोई भी विषम संख्या चौड़ाई इस व्यवहार को दिखाएगी, लेकिन संख्याएं भी नहीं होगी क्योंकि वे प्रत्येक पक्ष पर एक पूर्ण पिक्सेल को साफ दिखते हैं।

---

दूसरा, बॉक्स कैनवास के शीर्ष से अस्पष्ट है। जब आप अपने 3 पीएक्स स्ट्रोक को [0,0] पर केंद्रित करते हैं तो यह [-1.5, -1.5] के रूप में दूर तक और बाईं ओर फैलता है जो कैनवास की दृश्य सीमा से बाहर है। तो यह आधा मोटा लगता है जैसा होना चाहिए। http://jsfiddle.net/F4cqk/2/

पहले एक अपने कोड की तरह है:

---

अंतर का सबूत यहाँ देखें। दूसरा चौड़ाई में अपनी वर्दी दिखाने के लिए ऊपरी बाएं किनारे से दूर चले गए हैं। और तीसरा दिखाता है कि उप-पिक्सेल धुंधला होने के बिना 3 पीएक्स स्ट्रोक कैसे प्रस्तुत किया जाए।

Answer 2

क्योंकि आप 0 पर 3 की चौड़ाई के साथ एक पंक्ति आकर्षित करने के लिए यह कहा था ... तो यह 1/3 अपने कैनवास बंद होने जा रहा है ...

http://jsfiddle.net/mhFLG/ बनाम http://jsfiddle.net/mhFLG/1/