💀 🈁 🚵🏾 CANVAS कदम से कदम: मूल बातें 💏 💬 🎷

CANVAS कदम से कदम:

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

हमारे कैनवास की प्रारंभिक "ट्यूनिंग"

हमारे प्रायोगिक टैग में केवल दो विशेषताएँ हैं - ऊंचाई और चौड़ाई, ऊँचाई और चौड़ाई, क्रमशः डिफ़ॉल्ट रूप से कैनवास का आकार 150x300 पिक्सेल है।

यह ध्यान देने योग्य है कि कैनवास एक निश्चित आकार का क्षेत्र बनाता है जिसकी सामग्री संदर्भों द्वारा नियंत्रित होती है।

प्राथमिक उदाहरण:

<!doctype html> <html> <head> <title>canvasExample</title> <meta charset='utf-8' /> </head> <body> <canvas height='320' width='480' id='example'> </canvas> <script> var example = document.getElementById("example"), ctx = example.getContext('2d'); ctx.fillRect(0, 0, example.width, example.height); </script> </body> </html>

यदि आप इन दुर्भाग्यपूर्ण 13 लाइनों को एक फ़ाइल में सहेजते हैं और इसे एक ब्राउज़र के साथ खोलते हैं, तो आप उस क्षेत्र को एक काले आयत के साथ देख सकते हैं, और इसलिए यह बहुत ही कैनवास है जिस पर आयत खींची गई है, जिसके आयाम कैनवास के आकार के बराबर हैं।

आयतों

सबसे प्रारंभिक आंकड़ा जो आप आकर्षित कर सकते हैं वह एक आयत है। आयतों को खींचने के लिए तीन कार्य हैं।

 strokeRect(x, y, , ) //   fillRect(x, y, , ) //    clearRect(x, y, , ) //

इन कार्यों के संचालन को दर्शाने वाला एक उदाहरण:

 <!doctype html> <html> <head> <title>rectExample</title> <meta charset='utf-8' /> </head> <body> <canvas id='example'> </canvas> <script> var example = document.getElementById("example"), ctx = example.getContext('2d'); example.width = 640; example.height = 480; ctx.strokeRect(15, 15, 266, 266); ctx.strokeRect(18, 18, 260, 260); ctx.fillRect(20, 20, 256, 256); for (i = 0; i < 8; i += 2) for (j = 0; j < 8; j += 2) { ctx.clearRect(20 + i * 32, 20 + j * 32, 32, 32); ctx.clearRect(20 + (i + 1) * 32, 20 + (j + 1) * 32, 32, 32); } </script> </body> </html>

और अब एक संक्षिप्त लाइन-बाय-लाइन पार्सिंग:

10 और 11 की पंक्तियों में हमने कैनवास का आकार बदल दिया - ताकि जिस छवि की हमने कल्पना की थी, वह पूरी तरह से प्रदर्शित हो;

लाइनों में 12 और 13 हम दो अधूरे आयतों को आकर्षित करते हैं जो हमारे "चौखट" के अजीबोगरीब फ्रेम का प्रतीक होगा,

पंक्ति 14 में हम एक भरी हुई आयत बनाते हैं, जिसके आयामों को 64 वर्गों को 32 पिक्सेल की साइड चौड़ाई के साथ समायोजित करने की अनुमति होगी,

15-19 की पंक्तियों में हमारे पास दो चक्र हैं जो इस क्रम में एक काले आयत पर वर्ग क्षेत्रों को साफ करते हैं ताकि परिणामस्वरूप छवि एक चौखटे की तरह दिखे

रेखाएँ और चाप

रेखाओं से बनी आकृतियों को कई चरणों में क्रमिक रूप से प्रदर्शित किया जाता है:

 beginPath() closePath() stroke() fill()

StartPath का उपयोग किसी आकृति की ड्राइंग का वर्णन करने वाली क्रियाओं की एक श्रृंखला को "शुरू" करने के लिए किया जाता है। इस पद्धति का प्रत्येक नया कॉल पिछले एक के सभी कार्यों को रीसेट करता है और एक नया "ड्रॉ" करना शुरू करता है।

क्लोजपाथ एक वैकल्पिक क्रिया है और वास्तव में यह वर्तमान स्थिति से एक रेखा खींचकर उस स्थिति को समाप्त करने की कोशिश करता है जिस स्थिति से वे आकर्षित करना शुरू करते हैं।

अंतिम चरण स्ट्रोक या भरण विधि को कॉल करना है। दरअसल पहला चित्र के चारों ओर रेखाएँ खींचता है, और दूसरा आकृति को ठोस रंग से भर देता है।

जो लोग पुराने दिनों में एक बुनियादी 486x स्कूल में एक घर, एक बाड़ और एक पेड़ खींचते थे, शिक्षक के विचार के अनुसार, वह तुरंत नीचे के हिस्से को समझेंगे। तो, जैसे तरीके हैं

 moveTo(x, y) //  ""   x, y     lineTo(x, y) //       ,       arc(x, y, radius, startAngle, endAngle, anticlockwise) //  ,  x  y  ,     ,

नीचे दिए गए उदाहरण में ऊपर वर्णित सब कुछ का प्रभाव दिखाया गया है:

 <!doctype html> <html> <head> <title>pathExample</title> <meta charset='utf-8' /> </head> <body> <canvas id='example'> </canvas> <script> var example = document.getElementById("example"), ctx = example.getContext('2d'); example.height = 480; example.width = 640; ctx.beginPath(); ctx.arc(80, 100, 56, 3/4 * Math.PI, 1/4 * Math.PI, true); ctx.fill(); // *14 ctx.moveTo(40, 140); ctx.lineTo(20, 40); ctx.lineTo(60, 100); ctx.lineTo(80, 20); ctx.lineTo(100, 100); ctx.lineTo(140, 40); ctx.lineTo(120, 140); ctx.stroke(); // *22 </script> </body> </html>

लाइन 14 आर्क के रंग से भरी हुई है, लाइन 22 हमारे मुकुट की रूपरेखा खींचती है।

बर्नस्टीन-बेज़ियर कर्व्स

बेज़ियर वक्र क्या हैं, मुझे लगता है कि विकिपीडिया बेहतर व्याख्या करेगा।

दो कार्य हमारे लिए क्रमश: घन बिज़ियर वक्र और एक द्विघात वक्र के निर्माण के लिए उपलब्ध हैं:

 quadraticCurveTo(Px, Py, x, y) bezierCurveTo(P1x, P1y, P2x, P2y, x, y)

x और y ऐसे बिंदु हैं जिन पर जाना आवश्यक है, और द्विघात वक्र में निर्देशांक P (Px, Py) अतिरिक्त बिंदु हैं जो वक्र के निर्माण के लिए उपयोग किए जाते हैं। एक घन वक्र में, क्रमशः दो अतिरिक्त अंक।

दो घटता का एक उदाहरण:

 <!doctype html> <html> <head> <title>curveExample</title> <meta charset='utf-8' /> </head> <body> <canvas id='example'> </canvas> <script> var example = document.getElementById("example"), ctx = example.getContext('2d'); example.height = 480; example.width = 640; ctx.beginPath(); ctx.moveTo(10, 15); ctx.bezierCurveTo(75, 55, 175, 20, 250, 15); ctx.moveTo(10, 15); ctx.quadraticCurveTo(100, 100, 250, 15); ctx.stroke(); </script> </body> </html>

रंग जोड़ें

यह कि हमारी छवि केवल दो रंगों की नहीं होगी, बल्कि कोई भी रंग प्रदान किया जाएगा, दो गुण

 fillStyle = color //    strokeStyle = color //          css,

रंग सीएसएस के बिल्कुल समान है, उदाहरण के लिए, रंग सेट करने के सभी चार तरीके

 //        ctx.fillStyle = "orange"; ctx.fillStyle = "#FFA500"; ctx.fillStyle = "rgb(255,165,0)"; ctx.fillStyle = "rgba(255,165,0,1)"

इसी तरह, लाइनों के लिए रंग सेट किया गया है।

शतरंज की बिसात का उदाहरण लें और उसमें थोड़ा रंग जोड़ें:

 <!doctype html> <html> <head> <title>rectExample</title> <meta charset='utf-8' /> </head> <body> <canvas id='example'> </canvas> <script> var example = document.getElementById("example"), ctx = example.getContext('2d'); example.height = 480; example.width = 640; ctx.strokeStyle = '#B70A02'; //    ctx.strokeRect(15, 15, 266, 266); ctx.strokeRect(18, 18, 260, 260); ctx.fillStyle = '#AF5200'; //    ctx.fillRect(20, 20, 256, 256); for (i = 0; i < 8; i += 2) for (j = 0; j < 8; j += 2) { ctx.clearRect(20 + i * 32, 20 + j * 32, 32, 32); ctx.clearRect(20 + (i + 1) * 32, 20 + (j + 1) * 32, 32, 32); } </script> </body> </html>

कार्य

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

मैंने बैटलचिट गेम के स्तरों में से एक को पुन: टैनिकी के रूप में जाना जाता है , और ड्रॉपबॉक्स का जवाब नहीं देने की स्थिति में पेस्टेबिन की एक कड़ी है ।

अंत में, उदाहरण पर एक टिप्पणी। डेंडी जो तस्वीर दे सकता है, उसके विनिर्देशों में, स्क्रीन रिज़ॉल्यूशन 256 × 240 पिक्सेल होना चाहिए।

प्रसिद्ध तंचिकी आकार 13h13 बड़े ब्लॉकों में युद्ध का मैदान। जिनमें से प्रत्येक को 4 रिपीट स्प्राइट्स द्वारा तैयार किया गया है (जिनमें से, सामान्य गणना के अनुसार, 26x26 = 676 मानचित्र पर दिखाई देता है)। तो आइए जानें कि यह मूल पिक्सेल में कैसे था और इसे कैसे ठीक से मापना है। यदि आप 26 से 240 को विभाजित करते हैं, तो यह पता चलता है कि विभाजन का पूर्णांक भाग 8 होगा। यह पता चला है कि बनावट का आयाम 8x8 पिक्सेल था यानी। युद्ध के मैदान का आकार 208x208 है, और बड़ा ब्लॉक 16x16 है। चौड़ाई 256 पिक्सेल होनी चाहिए। अब हम सही कॉलम के आकार की गणना अतिरिक्त जानकारी और ऊपर / नीचे के क्षेत्रों के आकार के साथ करते हैं। दाईं ओर, यदि आप बारीकी से देखते हैं, तो चौड़ाई दो ब्लॉकों का एक आयाम है, कुल 2 * 16 = 32। हमारे पास पहले से ही 32 + 208 = 240 बायां क्षेत्र 16 है, और क्रमशः नीचे और ऊपर, समान 16 पिक्सेल। वास्तव में मेरे उदाहरण में, एक बड़े ब्लॉक का आयाम परिवर्तनशील सेलसाइज़ में निहित है, वास्तव में, सभी गणना इसके आकार के आधार पर की जाती हैं। आप इसके मूल्य को प्रयोग और बदल सकते हैं, मैं दृढ़ता से इसे दो शक्तियों (16, 32, 64, 128 ...) के एक से अधिक बनाने की सलाह देता हूं, अगर आप चाहते हैं कि सब कुछ ऐसा लगे जैसे यह एक अच्छी पुरानी डंडी पर था, तो इसके मूल्य को 16 पर सेट करें। हालांकि किसी के लिए भी अन्य मूल्य सब कुछ ठीक लग रहा है। यदि मेरे जैसा कोई दूसरा व्यक्ति मेरे लिखने के तरीके को पसंद करता है, तो मैं अगली कड़ी लिखूंगा, अन्यथा मैं इसे इसमें छिपाऊंगा

अगली श्रृंखला देखें: CANVAS स्टेप बाय स्टेप: छवियाँ

CANVAS कदम से कदम: मूल बातें