आपके द्वारा आउटपुट की जाने वाली लाइनों और स्तंभों की संख्या का पता लगाने के लिए, आपको खिड़की की चौड़ाई और ऊंचाई की जांच करनी चाहिए और उसके अनुसार इसे बदलना चाहिए। OnResize घटनाओं को सुनने के लिए याद रखें और तदनुसार चौड़ाई और ऊंचाई को संशोधित करें।
जब आप इसे शाब्दिक तरीके से करना चाहते हैं , तो आप पाठ का उपयोग एक मोनोसैप्ड फ़ॉन्ट और एक तालिका के साथ कर सकते हैं जहां प्रत्येक कक्ष में एक वर्ण होता है।
व्यक्तिगत वर्णों को संबोधित करने के लिए आप <table>सही संख्या में पंक्तियों और स्तंभों के साथ बना सकते हैं , जहां प्रत्येक <td>में एक आईडी होती है जिसमें उसके x- और y- निर्देशांक होते हैं। इस तरह से आप आईडी द्वारा अलग-अलग सेल को संबोधित कर सकते हैं और पत्र को बदलने के लिए उनके आंतरिक HTML को बदल सकते हैं और उनके रंग को बदलने के लिए अपने सीएसएस वर्ग को बदल सकते हैं।
एक कैनवास का उपयोग करना , हालांकि, तेज हो सकता है क्योंकि आपको प्रत्येक चरित्र के लिए एक बड़े डोम ट्री को हेरफेर करने की आवश्यकता नहीं है जो आपको बदलना है। बौना किला वैसे ही काम कर रहा है। जिन वस्तुओं का उपयोग वस्तुओं को दर्शाने के लिए किया जाता है, वे वास्तव में बिटमैप होते हैं, न कि सच्चे टेक्स्ट आउटपुट के लिए, और वे 2d ग्राफिक एपीआई का उपयोग करके तैयार किए जाते हैं। HTML5 कैनवास इसके लिए अच्छी तरह से सुसज्जित है। इसमें संदर्भ है। FillText विधि जो आपको कैनवास पर पाठ आकर्षित करने की अनुमति देती है। इसका उपयोग व्यक्तिगत पात्रों को आकर्षित करने के लिए किया जा सकता है। आप चर जोड़ तोड़ द्वारा आकार और फ़ॉन्ट चेहरा बदल सकते हैं context.font और फोन करके प्रत्येक अक्षर के रंग context.fillStyle ।
ध्यान दें कि प्रति फ्रेम सैकड़ों बार भरने वाले टैक्स्ट को धीमा किया जा सकता है, क्योंकि रैस्टराइजिंग फोंट महंगा है और कोई भी ब्राउज़र जिसे मैं कैशिंग के उपयोग के बारे में नहीं जानता हूं। इसका मतलब यह है कि जब आप एक ही अक्षर को सौ बार एक ही सेटिंग्स के साथ रेंडर करते हैं, तो यह एक सौ बार री-राइज़ हो जाएगा। प्रदर्शन आप एक छिपा हुआ कैनवास पर प्रत्येक रंग के साथ प्रत्येक अक्षर के रास्टराज़ उपस्थिति कैश सकता है बढ़ाने के लिए और उसके बाद इन छिपे हुए का उपयोग कर कैनवस आकर्षित context.drawImage । एक कैनवास से दूसरे में कॉपी करना आमतौर पर फ़ॉन्ट रैस्टोरेशन की तुलना में बहुत तेज होता है।
मैं वर्तमान में कैनवास का उपयोग करके 2d गेम विकसित कर रहा हूं, और ध्यान दिया कि सबसे बड़ा एफपीएस खाने वाला फ़ॉन्ट ड्राइंग था। जब मैंने rasterized पाठ के लिए कैश जोड़ा, तो इसने प्रदर्शन में बहुत सुधार किया।
चलती प्राणियों, मॉब, एन पीसी और पीसी के साथ। हालांकि ऐसा नहीं है कि मैं इस पैमाने को स्वीकार नहीं कर रहा हूं, मैं शायद इस सामग्री का एक चौथाई या किसी भी समय दिखाना शुरू कर दूंगा।