HTML5 कैनवस पर आउटपुट टेक्स्ट

एचटीएमएल 5 कैनवस एक बहुत व्यापक विषय है जिसमें कई "अच्छाई" हैं, जिनमें से कई पहले से ही लिखे गए हैं और लिखे जाएंगे। इसलिए, मैं इस लेख में थोड़ा बताना चाहता हूं, केवल एक छोटे से एक के बारे में, और पहली नज़र में यह एक सामान्य विषय की तरह कैसे लग सकता है - पाठ के साथ काम करना। मैं यह दिखाना चाहता हूं कि आप वेब पर सादे पाठ के साथ भी लगभग काम कर सकते हैं, अर्थात्। पोजिशनिंग, स्टाइल और ग्रेडर लगाने के साथ-साथ मल्टी-लाइन वाक्य लिखना आसान और परेशानी मुक्त है।

सादा पाठ

सादे पाठ को प्रदर्शित करने के लिए, आप दो संदर्भ फ़ंक्शंस fillText () और stroText () का उपयोग कर सकते हैं।
ये फ़ंक्शन तीन आवश्यक पैरामीटर लेते हैं: पाठ स्वयं और एक्स और वाई निर्देशांक, अर्थात्। इसका स्थान और उत्तरार्द्ध वैकल्पिक है: पाठ की अधिकतम चौड़ाई, यदि आप निर्दिष्ट करते हैं कि पाठ की अधिकतम चौड़ाई वास्तविक चौड़ाई से कम है, तो पाठ आपके द्वारा निर्दिष्ट चौड़ाई में सिकुड़ जाएगा। मैं अधिकतम चौड़ाई निर्धारित करने की सलाह नहीं देता, क्योंकि यह संकुचित होने पर भी खराब नज़र आता है। इस तरह के संपीड़न के बजाय, मैं एक नई पंक्ति पर पाठ को लपेटने की सलाह देता हूं, इसके लिए कोई मानक कार्य नहीं है, लेकिन मैं एक उदाहरण दूंगा कि यह कैसे आसानी से लागू किया जाता है।
यदि आप इस तरह के कार्यों का उपयोग करके केवल पाठ प्रदर्शित करते हैं, तो ऐसा पाठ छोटा और नॉन्डस्क्रिप्ट होगा। हम फ़ॉन्ट संदर्भ चर में फ़ॉन्ट सेट करके इसे ठीक कर सकते हैं। फ़ॉन्ट सेट किया गया है, साथ ही सीएसएस ([फ़ॉन्ट शैली] [फ़ॉन्ट वजन] [फ़ॉन्ट आकार] [फ़ॉन्ट चेहरा]) में। एक उदाहरण:

ctx.fillStyle = "#00F"; ctx.strokeStyle = "#F00"; ctx.font = "italic 30pt Arial"; ctx.fillText("Fill text", 20, 50); ctx.font = 'bold 30px sans-serif'; ctx.strokeText("Stroke text", 20, 100); 

डेमो

पाठ लेआउट

पाठ के स्थान के सापेक्ष दो मानक तरीके हैं: ऊर्ध्वाधर और क्षैतिज।
टेक्स्टबासलाइन का उपयोग करके ऊर्ध्वाधर स्थिति निर्धारित की जाती है, इसमें से एक संभव विकल्प स्थापित किया गया है: शीर्ष, फांसी, मध्य, अल्फाबेटिक, वैचारिक और नीचे ।

  ctx.textBaseline = "bottom"; ctx.fillText("bottom", 400, 75); 

डेमो

और क्षैतिज रूप से textAlign का उपयोग करते हुए, निम्न मापदंडों में से एक हो सकता है: केंद्र, प्रारंभ, अंत, बाएं, दाएं ।

  context.textAlign = "center"; ctx.textBaseline = "bottom"; context.fillText("center", 250, 20); 

डेमो

ये विधियाँ आदर्श से बहुत दूर हैं और उनकी मदद से पाठ को स्थान देना कभी-कभी समस्याग्रस्त होता है, क्योंकि आप इसे चाहते हैं। नीचे मैं वर्णन करूंगा कि आप अपनी स्थिति, यहां तक ​​कि बहु-पंक्ति पाठ का उपयोग कैसे कर सकते हैं।

stylization
सबसे आसान तरीका है कि हम टेक्स्ट को स्टाइल कर सकते हैं, इसे एक रंग दे सकते हैं। रंग को भरने के रंग का उपयोग करके सेट किया जाता है, रंग भरने के लिए सेट करें और स्ट्रोक रंग को सेट करने के लिए स्ट्रोक करें।
CSS3 की तरह, आप कैनवास में पाठ पर छाया भी डाल सकते हैं। यह उपयोग किया जाता है: शैडोक्लर - छाया के रंग को सेट करना, शैडोऑफसेटएक्स और शैडोऑफसेट - इंडेंटेशन और शैडोब्लर सेट करना - छाया के धुंधलेपन को सेट करना।

  ctx.shadowColor = "#F00"; ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 5; ctx.shadowBlur = 5; ctx.strokeText("Shadow text", 20, 100); 

पाठ के लिए स्नातक भी समर्थित हैं। ढाल खुद createLinearGradient () फ़ंक्शन का उपयोग करके बनाई गई है। और AddColorStop () फ़ंक्शन के साथ, इसमें रंग और उनके स्थान सेट किए गए हैं। पाठ को एक ढाल के साथ-साथ एक ठोस रंग से भर दिया जाता है, जो भरण और स्ट्रोक सेलेटी का उपयोग करता है ।

  var gradient = ctx.createLinearGradient(0, 0, 0, 60); gradient.addColorStop(0.0, 'rgba(0, 0, 255, 1)'); gradient.addColorStop(0.3, 'rgba(128, 0, 255, 0.6)'); gradient.addColorStop(0.6, 'rgba(0, 0, 255, 0.4)'); gradient.addColorStop(1.0, 'rgba(0, 255, 0, 0.2)'); ctx.fillStyle = gradient; 

सामान्य भरण और ढाल भरण के अलावा, आप किसी भी बनावट में भी भर सकते हैं। ऐसा करने के लिए, पाठ आउटपुट से पहले छवि बनावट को लोड करना आवश्यक है। और फिर उसके आधार पर एक बनावट बनाने के लिए createPattern () का उपयोग करें । आप सेट कर सकते हैं कि छवि दोहराती है या नहीं।

  var pattern = ctx.createPattern(img, 'repeat'); ctx.fillStyle = pattern; 

डेमो

पाठ चौड़ाई और बहुस्तरीय पाठ

मान लें कि आपको असीमित लंबाई के कैनवास पर पाठ लिखने की आवश्यकता है, चाहे वह एक शब्द हो, या कई वाक्य हों। यदि आप इसे इस प्रकार लिखते हैं, अर्थात पूरे टेक्स्ट को fillText () में पेस्ट करें , उसके बाद ही वह हिस्सा स्क्रीन पर दिखाई देगा जो कैनवास की चौड़ाई से अधिक नहीं है। यानी यदि कैनवास की चौड़ाई 400 पिक्सेल है, तो आप उस पाठ को दूर नहीं करेंगे जो उसकी चौड़ाई से आगे जाता है। मल्टी-लाइन टेक्स्ट बनाने के लिए आपको कंट्रास्ट करना होगा। लेकिन एल्गोरिथ्म सरल है। सबसे पहले, हम पाठ की चौड़ाई की गणना करते हैं, इसकी तुलना उस क्षेत्र की अधिकतम चौड़ाई से करते हैं जहाँ हम इस पाठ को प्रदर्शित करना चाहते हैं। यदि पाठ की चौड़ाई उस चौड़ाई से अधिक नहीं है, तो हम पाठ को प्रिंट करते हैं, और यदि यह अधिक हो जाता है, तो हम आपके लिए सबसे सुविधाजनक तरीके से पाठ को तोड़ते हैं, मैं इसे रिक्त स्थान में तोड़ना पसंद करता हूं।
पाठ की चौड़ाई की गणना करने के लिए, आप मापक () फ़ंक्शन का उपयोग कर सकते हैं, जो ऑब्जेक्ट के रूप में पाठ की चौड़ाई देता है (दुर्भाग्य से यह फ़ंक्शन पाठ की ऊंचाई नहीं देता है, मुझे उम्मीद है कि यह सुविधा जोड़ दी जाएगी, लेकिन अब तक आपको अन्य तरीकों से गणना करनी होगी, बाकी लेख में) ।
एक उदाहरण:

 function wrapText(context, text, marginLeft, marginTop, maxWidth, lineHeight) { var words = text.split(" "); var countWords = words.length; var line = ""; for (var n = 0; n < countWords; n++) { var testLine = line + words[n] + " "; var testWidth = context.measureText(testLine).width; if (testWidth > maxWidth) { context.fillText(line, marginLeft, marginTop); line = words[n] + " "; marginTop += lineHeight; } else { line = testLine; } } context.fillText(line, marginLeft, marginTop); } var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var maxWidth = 400; // ,    var lineHeight = 25; /*    ,    ,       */ var marginLeft = 20; var marginTop = 40; var text = "       ,       , " + "     .         , " + " ,   ,      ,      ." + "  ,     ."; context.font = "16pt Calibri"; context.fillStyle = "#000"; wrapText(context, text, marginLeft, marginTop, maxWidth, lineHeight); 

डेमो

ऐसा लगता है कि सब कुछ ठीक है, आपको पाठ के निर्देशांक निर्दिष्ट करने की आवश्यकता नहीं है, मैन्युअल रूप से गणना करें कि पाठ चौड़ाई में फिट बैठता है या नहीं। लगभग सब कुछ स्वचालित है और अच्छा लग रहा है, लेकिन फिर भी एक छोटी सी बारीकता है, पाठ की ऊँचाई हार्डकोड है, इसलिए फ़ॉन्ट या आकार बदलते समय, आपको हर बार पाठ की ऊंचाई को मैन्युअल रूप से समायोजित करना होगा (उदाहरण में, पंक्तिबद्ध चर)।

पाठ की ऊंचाई निर्धारित करें

कैनवास पर पाठ के साथ काम करते समय, न तो मापक () फ़ंक्शन, और न ही कोई अन्य, हमें पाठ की ऊंचाई निर्धारित करने की अनुमति देता है। फिर भी, इस आपदा का सामना करना संभव है, इस समस्या का समाधान जो मैं आपको देना चाहता हूं वह बहुत सुंदर नहीं है, लेकिन फिर भी यह काम करता है।
जब हम टेक्स्ट स्टाइल (फ़ॉन्ट आकार और शैली) को फ़ॉन्ट में सेट करते हैं, तो हम इसे उसी शैली में सेट करते हैं, जैसा कि हम इसे सीएसएस में सेट करेंगे। फ़ॉन्ट और उनके आकार, निश्चित रूप से, यदि कैनवास में ऐसा फ़ॉन्ट उपलब्ध है, तो यह सामान्य शैलियों में भी उपलब्ध होगा।
और इसलिए, विचार यह है, हमारे पास फ़ॉन्ट का आकार और प्रकार है फ़ॉन्ट वैरिएबल में, हम DOM में एक नया तत्व बनाते हैं, टेक्स्ट को वहां रखते हैं, और उस वेरिएबल से शैलियों को सेट करते हैं। अगला, ऑफसेटहाइट का उपयोग करके हम तत्व की ऊंचाई प्राप्त करते हैं, जो हमारे पाठ की ऊंचाई होगी। उसके बाद, हम इस तत्व को DOM से सुरक्षित रूप से निकाल सकते हैं।
इस विचार के कार्यान्वयन का एक उदाहरण:

 var text = "        ."; var marginLeft = canvas.width - context.measureText(text).width; var marginTop = canvas.height - getFontHeight(context.font); context.fillText(text, marginLeft, marginTop); function getFontHeight(font) { var parent = document.createElement("span"); parent.appendChild(document.createTextNode("height")); document.body.appendChild(parent); parent.style.cssText = "font: " + font + "; white-space: nowrap; display: inline;"; var height = parent.offsetHeight; document.body.removeChild(parent); return height; } 

परिणाम:



डेमो

मुझे खुशी होगी अगर कोई व्यक्ति पाठ की ऊंचाई प्राप्त करने के लिए अधिक सुंदर या सही विकल्प प्रदान करता है।
आपका धन्यवाद