प्राथमिक कैनवस

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



मैं तुरंत कहूंगा, मैं कैनवास के साथ काम करने के तर्क को समझाना चाहता हूं। कोड बहुत सरल है, मुझे आशा है कि यह आपको कैनवास जैसे उपकरण सीखने के लिए प्रोत्साहित करता है। यह एक शुरुआती जेएस प्रोग्रामर के लिए भी बहुत अच्छा अभ्यास है।

कोड पर चलते हैं। आइए कैनवास पर विभिन्न रंगों के वर्गों की एक साधारण पीढ़ी लिखें। आप एक बार में पूरा कोड देख सकते हैं, फिर मैं इसे समझाऊंगा।


हमें क्या करने की आवश्यकता है?

1. कैनवास और उसके 2 डी संदर्भ प्राप्त करें (यदि आपने पहले ऐसा नहीं किया है, तो चिंता न करें, इससे कोड की 2 लाइनें बन जाती हैं)
2. आइए हम अपने कैनवास को थोड़ा अनुकूल बनाते हैं
3. चर और गुण सेट करें जिनकी हमें आवश्यकता है
4. कैनवास पर एक तत्व खींचना
5. आकार बदलते समय, कैनवास का आकार बदलें

कैनवास में काम को 3 चरणों में विभाजित किया जा सकता है।

1. हमारे द्वारा आवश्यक गुणों को सेट करना (कलम की मोटाई, रंग भरना, रेखा का रंग और अन्य गुण)
2. एक तत्व आकर्षित करें
3. अगर हम कुछ गतिशील करते हैं। उदाहरण के लिए, एक गेम, एनीमेशन, कणों और अन्य तत्वों की एक प्रणाली, फिर हम एक चक्र बनाते हैं और उस पर हमारी वस्तुओं के रेंडर (रेंडरिंग) को छोड़ देते हैं

खैर, वापस हमारे कोड पर।

1. जैसा कि मैंने कहा, कोड की दो लाइनें और हम कैनवास में हेरफेर कर सकते हैं



Id द्वारा कोई तत्व प्राप्त करना मानक ब्राउज़र API है, लेकिन getContext स्वयं कैनवास की एक विधि है। आप एक 3D संदर्भ प्राप्त कर सकते हैं, लेकिन फिलहाल हमें इसकी आवश्यकता नहीं है।

2. दूसरा बिंदु, तीसरा और पांचवां मैं एकजुट होऊंगा क्योंकि चर घोषित किए जा रहे हैं + कोड यहाँ एक ही है। तुम भी एक अलग समारोह बना सकते हैं कोड दोहराव पहले से ही चल रहा है, जो खराब है।



हमें आगे चौड़ाई और ऊंचाई के चर की आवश्यकता होगी। इसके अलावा, कैनवास संदर्भ प्राप्त करने के बाद ReSize फ़ंक्शन को कॉल करना न भूलें।

हमें एक और विकल्प वस्तु की आवश्यकता है। इसमें हम सभी सेटिंग्स को स्टोर करेंगे।

अपारदर्शिता - जिस गति से हमारे तत्व कैनवस पर अधिलेखित हो जाएंगे
गिनती - क्यूब्स की संख्या जो हम फ़ंक्शन के एक रन में बनाएंगे
एफपीएस - मुझे लगता है कि यह समझाने की कोई आवश्यकता नहीं है कि ... सच्चाई अजीब है ...
रंग - यहाँ मास्क है जो हमारे रंग पैलेट का प्रतिनिधित्व करता है
ह्यू 0 से 360 तक की रेंज में एक कलर टोन है। तस्वीर साफ हो जाएगी



DivisionSpeed ​​एक वैरिएबल है जिसके साथ हम कलर चेंज रेट को एडजस्ट कर सकते हैं



4. हमारे लिए जो कुछ भी रहता है वह है लूप बनाना, रेंडरिंग के लिए एक फंक्शन, और यह सब कॉल करना।



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

हम एक बार में 100 तत्वों को खींचने के लिए एक लूप में रेंडरिंग करेंगे। चक्र के अंदर, पहली चीज जो हम करते हैं वह एक ऐसी स्थिति है जो हमें 0 से 360 तक की सीमा में एक रंग टोन चुनने की अनुमति देती है, जिससे हमारे क्यूब्स के रंग बदल जाएंगे। बाद की दो पंक्तियों को एक में जोड़ा जा सकता है, जिससे सीधे आकृति का रंग भरना होगा। ctx.fillStyle आपको भरने का रंग सेट करने की अनुमति देता है, और ctx.fillRect (बिंदु x, बिंदु y, चौड़ाई, ऊंचाई) आपको एक आकृति बनाने की अनुमति देता है। हम एक चौड़ाई के साथ एक यादृच्छिक ऊंचाई निर्धारित करते हैं, लेकिन हमारे आकारों की सीमा में।

लूप के बाद दो लाइनें, यह स्क्रीन को साफ करने के लिए है। आप पहले से ही जानते हैं कि फिलस्टाइल आपको भरने का रंग सेट करने की अनुमति देता है, हम विकल्प ऑब्जेक्ट से अपारदर्शिता के बराबर अस्पष्टता के साथ सफेद रंग सेट करते हैं। और हम अपने कैनवास के आकारों के बराबर आयामों के साथ 0: 0 बिंदु से सफाई का आंकड़ा बनाना शुरू करते हैं।

हम केवल हमारे प्रोग्राम में कहीं भी Init फंक्शन को कॉल कर सकते हैं।

यदि आपको अभी भी संदेह है कि आप कैनवास के साथ सुंदर चीजें कर सकते हैं, तो यहां एक उदाहरण है।


यदि आप कैनवास में रुचि रखते हैं, तो इस तकनीक का अध्ययन जारी रखने का समय है। मैं आपको एक अच्छे अध्ययन लेख पर सलाह नहीं दे सकता। कैनवास के बारे में पढ़ना मेरे लिए बहुत ही उबाऊ था और मैंने अपने लिए कुछ भी अच्छा नहीं किया। और यूट्यूब पर कैनवास पर बहुत कम अच्छे वीडियो हैं, और जिन्हें देखा जा सकता है उनमें केवल 10% आवश्यक जानकारी और 30% पानी होता है, और बाकी समय वे कोड को त्रुटियों के साथ लिखते हैं और इसे डिज़ाइन करते हैं। मेरी राय में, सबसे अच्छी बात यह है कि कुछ सरल उदाहरण लें और इसे स्वयं लागू करने का प्रयास करें।