पिक्सेल सेट करने से पहले सीएसएस बॉक्स को मापें
प्रदर्शित कैनवास आयामों को पढ़ें, चुने हुए डिवाइस स्केल से गुणा करें, बैकिंग चौड़ाई और ऊंचाई सेट करें, और ड्राइंग निर्देशांक को बदलें ताकि गेम लॉजिक सीएसएस-स्पेस इकाइयों का उपयोग जारी रख सके। चौड़ाई या ऊंचाई बदलने के बाद परिवर्तन को दोबारा लागू करें, क्योंकि उन कैनवास विशेषताओं को निर्दिष्ट करने से इसकी ड्राइंग स्थिति रीसेट हो जाती है।
1, 1.5 और 2 जैसे स्केल कारकों पर एक-पिक्सेल ग्रिड, विकर्ण किनारों और छोटे यूआई टेक्स्ट की तुलना करें। तीक्ष्णता और प्रतिक्रिया दोनों की जांच करें। एक पूर्ण डिवाइसdevicePixelRatio गुणक एक प्रारंभिक बिंदु है, न कि एक नियम जिसका हर गेम को पालन करना चाहिए; रेंडर स्केल को कम करने से सीएसएस लेआउट को अपरिवर्तित रखते हुए घने डिस्प्ले पर लागत कम हो सकती है।
आकार बदलने और मेमोरी को पसंद का हिस्सा मानें
बैकिंग-स्टोर पिक्सेल गिनती दोनों आयामों के साथ बढ़ती है, इसलिए प्रत्येक दिशा में दोहरीकरण स्केल चार गुना अधिक पिक्सेल बनाता है। सबसे बड़े समर्थित डिस्प्ले आकार पर एक व्यस्त दृश्य का परीक्षण करें और उच्च-घनत्व सेटिंग को शिपिंग करने से पहले मेमोरी दबाव या धीमे रिड्रॉ को देखें।
एमडीएन का कैनवास मार्गदर्शन डिवाइस पिक्सेल अनुपात-आधारित सेटअप दिखाता है। वेबजीएल का सर्वोत्तम अभ्यास पृष्ठ गैर-पूर्णांक अनुपात और ज़ूम के साथ सूक्ष्मताएं बताता है। ब्राउज़र ज़ूम करने या डिस्प्ले के बीच विंडो ले जाने के बाद दोबारा जांचें, और यदि इसके प्रभावी आयाम नहीं बदले हैं तो बैकिंग स्टोर को बार-बार रीसेट करने से बचें।
गेम Canvas का devicePixelRatio से जुड़े सवाल
क्या कैनवास की चौड़ाई हमेशा CSS चौड़ाई गुणा डिवाइसपिक्सेल अनुपात के बराबर होनी चाहिए?
नहीं। इससे सामग्री स्पष्ट हो सकती है, लेकिन प्रोसेसिंग और मेमोरी का उपयोग भी बढ़ता है। उसी दृश्य और दृश्य जाँच के साथ पूर्ण रिज़ॉल्यूशन और सीमित स्केल वाले संस्करण की तुलना करें।
आकार बदलने के बाद ड्राइंग धुंधली क्यों हो जाती है?
कैनवास की चौड़ाई या ऊंचाई बदलने से इसका बिटमैप साफ़ हो जाता है और संदर्भ स्थिति रीसेट हो जाती है। इसके समर्थन आयामों की पुनः गणना करें, संदर्भ को फिर से मापें, और दृश्य को फिर से बनाएं।
आगे पढ़ें
कोई पुरानी जानकारी दिखी? सुधार की जानकारी दें