परिचय
इस भाग में, हम एक लंबे समय से खराब होने वाले विषय पर विचार करेंगे - चित्र खींचना, और एक न पहना जाने वाला विषय - ड्राइंग पाठ। पाठ के लिए सभी सेटिंग्स पर विचार करें, और एक उदाहरण के रूप में जो हमने सीखा है उसका उपयोग करते हुए, एक चार्टिंग टूल लिखने पर विचार करें।
चित्र बनाना
छवि वस्तु
एक छवि बनाने के लिए आपको उसकी वस्तु बनाने की आवश्यकता है। निर्माता छवि फ़ंक्शन है। यह कोई तर्क नहीं लेता है, और छवि के लिए रास्ता तय करने के लिए, आपको प्राप्त ऑब्जेक्ट की src संपत्ति को बदलने की आवश्यकता है। आइए हमारी स्क्रिप्ट में लाइन जोड़ें:
var img = new Image() img.src = 'path.png'
छवि अपलोड करें
अब यह ध्यान देने योग्य है कि छवि को इसके लिए डाउनलोड करने से पहले, हम लोड वस्तु हैंडलर को img ऑब्जेक्ट के लिए जोड़ते हैं, ऑब्जेक्ट के बनने के बाद इसे जोड़ते हैं, और हम इस तरह के कोड के साथ समाप्त होते हैं:
var img = new Image() img.onload = function(){
एक चित्र बनाएं
drawImage(object img, float x, float y)
- मूल आकार के साथ एक छवि खींचता है ताकि इसका ऊपरी बाएं कोने बिंदु (x; y) पर हो।
स्केलेबल
drawImage(object img, float x, float y, float w, float h)
- यह भी काम करता है, लेकिन मूल आकार के बजाय, यह चौड़ाई w और ऊंचाई h के साथ खींचता है।
Obreja
drawImage(object img, float sx, float sy, float sw, float sh, float cx, float cy, float cw, float ch)
- कैनवास पर चौड़ाई के साथ मूल छवि (बिंदु, sx, sy) पर स्थित चौड़ाई sw और ऊँचाई sh के साथ छवि का एक भाग ड्रा करें।
पाठ खींचना
बहुत बार खेल में, और वास्तव में अनुप्रयोगों में, आपको उपयोगकर्ता को न केवल एक तस्वीर, बल्कि कुछ जानकारी भी दिखाने की आवश्यकता होती है, इसके लिए आप ड्राइंग पाठ के कार्यों का उपयोग कर सकते हैं।
बाढ़ में ड्रा
ctx.fillText(string text, float x, float y)
- बिंदु पर पाठ (x; y) खींचता है।
नोट: fillText फ़ंक्शन में एक वैकल्पिक मैक्सविड तर्क है, लेकिन यह FF में घटिया काम करता है और क्रोम में बिल्कुल भी काम नहीं करता है।
फ़ॉन्ट बदलें
फ़ॉन्ट संदर्भ गुण पाठ की शैली को नियंत्रित करता है और इसमें
सीएसएस के समान एक
सिंटैक्स होता है , उदाहरण के लिए, हमारी स्क्रिप्ट में निम्न पंक्तियाँ जोड़ें:
ctx.font = "bold italic 30px sans-serif" ctx.fillText(" ",300,300)
रंग नियंत्रण और न केवल हम भरण और स्ट्रोक गुण गुणों के माध्यम से कर सकते हैं
कंट्रोवर्सी ड्रा करें
चौकस पाठक ने सबसे अधिक तार्किक रूप से अनुमान लगाया कि स्ट्रोक टेक्स्ट फ़ंक्शन का उपयोग टेक्स्ट की रूपरेखा तैयार करने के लिए किया जाता है, हमारे उदाहरण में, fillText को स्ट्रोकटेक्स्ट से बदलें।
क्षैतिज रूप से संरेखित करें
पाठ संरेखण के लिए एक पाठ्य गुण है; इसमें पाँच संभावित मान हो सकते हैं:
- बाईं ओर - पाठ बाईं ओर संरेखित है
- दाईं ओर - पाठ दाईं ओर संरेखित है
- केंद्र - पाठ केंद्रित है
- प्रारंभ - (डिफ़ॉल्ट मान) पाठ बाईं ओर से दाईं ओर लिखने के लिए बाईं ओर से पंक्ति की शुरुआत से दाएं और बाएं से दाएं से बाएं से गठबंधन किया जाता है
- अंत - पाठ को पंक्ति की शुरुआत से दाएं से बाएं से दाएं और बाएं से अक्षर से बाएं से अक्षर से संरेखित किया जाता है
पाठ आधार रेखा
पाठ की आधार रेखा को नियंत्रित करने के लिए, टेक्स्ट बेसलाइन संपत्ति मौजूद है; यह निम्नलिखित मान ले सकती है: शीर्ष, लटकना, मध्य, वर्णमाला, वैचारिक, निचला। इन मानों का अर्थ वर्णन करने की तुलना में दिखाना आसान है, इसलिए व्हाट्सएप पर एक तस्वीर मिली:
चौड़ाई को मापें
measureText(string text)
- एक विशेष टेक्स्टमैट्रिक्स ऑब्जेक्ट लौटाता है, जिसकी वर्तमान में केवल एक ही संपत्ति है - चौड़ाई - पिक्सेल में पाठ की चौड़ाई।
क्लाइंट साइड पर छवियों को सहेजना
छवियों को सहेजने के लिए पहले से ही तीन तरीके हैं (getAsFile, getBlob, toDataURL), लेकिन हम केवल toDataURL पर विचार करेंगे क्योंकि यह ऐसा है जो ब्राउज़रों द्वारा सबसे अच्छी तरह से समर्थित है। यह ध्यान देने योग्य है कि विधि को संदर्भ के लिए नहीं, बल्कि कैनवास तत्व पर लागू किया जाता है, हालांकि इसे संदर्भ के 'कैनवास' गुण के रूप में प्राप्त किया जा सकता है, यह विधि एक छवि प्रकार को एक तर्क के रूप में भी लेती है (डिफ़ॉल्ट 'png' है)। यह विधि एक बेस 64 छवि लौटाएगी।
सेव बहाल नहीं किया जा सकता है
यदि आप संदर्भ की कुछ संपत्ति को बदलते हैं, तो यह बाद के सभी लोगों को प्रभावित करेगा। जीवन को सरल बनाने के लिए, विनिर्देश में डेवलपर्स के पास दो संदर्भ विधियां हैं जो सहेजती हैं और पुनर्स्थापित करती हैं।
सहेजें - वर्तमान स्थिति को बचाता है
पुनर्स्थापना - पिछले सहेजे गए को पुनर्स्थापित करता है
एक साधारण उदाहरण पर विचार करें:
ctx.save() ctx.textAlign = 'center' ctx.font = "bold italic 30px sans-serif" ctx.strokeText(" ",300,300) ctx.restore() ctx.fillText(" ",400,400)
जैसा कि आप देख सकते हैं, शुरुआती लोगों के लिए सभी गुणों को रीसेट करने के बजाय, हमने बस बचत और पुनर्स्थापना का उपयोग किया