🆘 🚵 🔥 एक और कैनवस गाइड [1]: कैनवस तत्व, आयतें, रास्ते ↩️ 🦒 🧛🏿

एक और गाइड क्यों?

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

इस पृष्ठ पर खोज इंजन से आया था

कैनवास तत्व

कैनवास तत्व का नाम 'कैनवास' (ठीक है, जिसने सोचा होगा) और विशेषताएँ 'चौड़ाई' और 'ऊँचाई', और यह ध्यान देने योग्य है कि ये विशेषताएँ CSS से संबंधित नहीं हैं, वे कैनवास तत्व की चौड़ाई और ऊँचाई को स्क्रीन पर नहीं स्क्रीन पर इंगित करते हैं, लेकिन कैनवास के समन्वय विमान पर। इसके अलावा, टैग के अंदर पाठ को कैनवास समर्थन के साथ एक ब्राउज़र द्वारा अनदेखा किया जाएगा और कैनवास समर्थन के बिना एक ब्राउज़र में प्रदर्शित किया जाएगा।

बाद में इस ट्यूटोरियल में हम निम्नलिखित ब्लैंक का उपयोग करेंगे।

<!doctype html> <html> <head> <title> </title> </head> <body> <canvas id="cnv" width="600" height="600">  </canvas> <script type="text/javascript" src='your_file.js'></script> </body> </html>

कैनवास पर आरेखण एक संदर्भ के माध्यम से होता है जिसे '2d' तर्क के साथ getContext तत्व के कैनवास विधि को कॉल करके प्राप्त किया जा सकता है।
इसलिए हमारी स्क्रिप्ट में एक पंक्ति जोड़ें।

 var ctx = document.getElementById('cnv').getContext('2d')

आयतों

कैनवास में आयत एकमात्र आदिम है। आयतों के साथ काम करने के लिए केवल 3 विधियाँ हैं।

आयत भरें

fillRect - एक भरा हुआ आयत खींचता है, इसके तर्कों पर विचार करें

 fillRect(float x, float y, float w, float h)

जहां x और y क्रमशः ऊपरी बाएं कोने के निर्देशांक हैं, और w और h क्रमशः चौड़ाई और ऊंचाई हैं। आइए एक उदाहरण देखें। स्क्रिप्ट में एक पंक्ति जोड़ें।

 ctx.fillRect(200, 250, 200, 100)

जैसा कि कई ने अनुमान लगाया है, निष्पादन के बाद, कैनवास के केंद्र में 200 पिक्सेल की चौड़ाई और 100 पिक्सल की ऊंचाई के साथ एक आयत तैयार किया जाएगा।

सर्कल आयत

stroRect - फिलरक्ट की तरह ही काम करता है, लेकिन इसके विपरीत यह आयत को नहीं भरता है, बल्कि केवल कंट्रोल्स को खींचता है। स्क्रिप्ट में एक पंक्ति जोड़ें।

 ctx.strokeRect(150, 200, 300, 200)

अब, भरी हुई आयत के आसपास, हमने एक दूसरे के आकृति को आकर्षित किया।

आयत को साफ करें

ClearRect - एक ही तर्क देता है, लेकिन अपने भाइयों के विपरीत यह आकर्षित नहीं करता है, लेकिन जो कुछ पहले था, उसे नष्ट कर देता है, जैसे कि हमने वहां कुछ भी नहीं बनाया है। चलो भरे हुए आयत का हिस्सा हटा दें,
ऐसा करने के लिए, हमारी स्क्रिप्ट में लाइन जोड़ें:

 ctx.clearRect(350, 300, 50, 50)

इस प्रकार, हम भरे हुए आयत के हिस्से को काट देते हैं।

रास्ता

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

रास्ता शुरू करो

एक पथ बनाने का पहला कदम है, शुरुआती विधि को कॉल करना, इसे कॉल करने के बाद, हम उप-पथ (घटता, रेखाएं) जोड़ते हैं जो एक विशेष सूची में संग्रहीत होते हैं और प्रत्येक कॉल के बाद शुरू करने के लिए इस सूची को रीसेट किया जाता है। तो हमारी स्क्रिप्ट में एक पंक्ति जोड़ें:

 ctx.beginPath()

हम बिंदु पर जाते हैं

 moveTo(float x, float y)

- कर्सर की स्थिति को (x; y) पर ले जाता है।
हमारी स्क्रिप्ट में पंक्ति जोड़ें:

 ctx.moveTo(200,200)

बिंदु पर एक रेखा खींचें

 lineTo(float x, float y)

- कर्सर स्थिति से (x; y) तक एक रेखा खींचता है।
उदाहरण के लिए, हमारी स्क्रिप्ट में पंक्ति जोड़ें:

 ctx.lineTo(400,400)

पंक्तियां

अंतिम बिंदु कैनवास पर लाइन दिखाने के लिए स्ट्रोक विधि का कॉल होगा। इसलिए स्क्रिप्ट में एक पंक्ति जोड़ें:

 ctx.stroke()

अब, यदि आप हमारे उदाहरण को खोलते हैं, तो हम देखेंगे कि कैनवास पर एक रेखा खींची गई है।

ताला

यदि हम कुछ आकृति बनाते हैं और हमें इसे बंद करने की आवश्यकता है, तो हम क्लोजपाथ विधि का उपयोग कर सकते हैं। एक उदाहरण के लिए हम एक त्रिभुज बनाएंगे, इसके लिए हम केवल अपनी फ़ाइल में संदर्भ प्राप्त करना छोड़ देंगे और निम्नलिखित पंक्तियाँ वहां डालेंगे:

 ctx.beginPath() ctx.moveTo(200,200) ctx.lineTo(400,400) ctx.lineTo(200,400) ctx.closePath() ctx.stroke()

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

में भरें

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

डग

 arc(float x, float y, float r, float startAngle, float endAngle, bool anticlockwise)

- बिंदु (x; y), त्रिज्या - r, प्रारंभ कोण और अंत में शुरू में एक चाप खींचता है, क्रमशः, EndAngle, और यदि anticlockwise = true है, तो वृत्त का भाग वामावर्त, अन्यथा उसकी दिशा में चला जाता है।
:
उदाहरण के लिए, चलिए आंशिक रूप से भरा हुआ वृत्त बनाते हैं, इसके लिए हम अपनी स्क्रिप्ट को साफ करेंगे, हम केवल संदर्भ छोड़ देंगे। फिर निम्नलिखित पंक्तियों को जोड़ें।

 ctx.beginPath() ctx.arc(200,300,70,0,Math.PI*0.85,false) ctx.stroke() ctx.beginPath() ctx.arc(200,300,70,0,Math.PI*0.85,true) ctx.fill()

थोड़ा अलग आर्क्स

 arcTo(float x1, float y1, float x2, float y2. float r)

- दो खंडों के बीच संलग्न त्रिज्या r के साथ एक चाप खींचें - AB और BC, जहां बिंदु A कर्सर स्थिति है, B = = (X1; y1) C = (x2; y2);
उदाहरण के लिए, चलिए स्क्रिप्ट में केवल संदर्भ प्राप्त करते हुए निम्नलिखित पंक्तियों को जोड़ते हैं:

 ctx.beginPath() ctx.moveTo(200,300) ctx.arcTo(300,100,400,300,50) ctx.stroke()

द्विघात वक्र

 quadraticCurveTo(float x1, float y1, float x2, float y2)

- तीन बिंदुओं (कर्सर स्थिति, (X1; y1), (x2; y2)) द्वारा गठित द्विघात वक्र आकर्षित करें।
एक उदाहरण के लिए, देखते हैं कि निम्नलिखित कोड को क्या निष्पादित करना है:

 ctx.beginPath() ctx.moveTo(100,100) ctx.quadraticCurveTo(200,200,50,200) ctx.stroke()

बेजियर घटता है

 bezierCurveTo(float x1, float y1, float x2, float y2, float x3, float y3)

- घन बेज़ियर वक्र खींचना। उदाहरण के लिए, हमारी स्क्रिप्ट में निम्न कोड जोड़ें:

 ctx.beginPath() ctx.moveTo(100,100) ctx.bezierCurveTo(200,200,100,300,50,100) ctx.stroke()

आयतों के बारे में फिर से

 rect(float x, float y, float w, float w)

- FillRect और स्ट्रोकRect के बिल्कुल समान काम करता है, लेकिन उनके विपरीत, यह केवल पथ के लिए एक आयत जोड़ता है।

अब जब हमने ड्राइंग पथों की मूल बातें सीख ली हैं, तो हमें पथों के साथ काम करते समय दो और महत्वपूर्ण तरीके सीखने होंगे।

यह आंकड़ा पर एक बिंदु है?

 isPointInPath(float x, float y)

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

 ctx.beginPath() ctx.rect(200,200,100,200) console.log(ctx.isPointInPath(250,250)) console.log(ctx.isPointInPath(100,100))

यह स्क्रिप्ट पहले डिबग कंसोल पर सही और फिर असत्य पर आउटपुट होनी चाहिए।

ड्राइंग क्षेत्र को सीमित करें

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

 ctx.beginPath() ctx.arc(200,300,70,0,Math.PI*2,true) ctx.stroke() //       ctx.clip() //      ctx.beginPath() ctx.moveTo(100,320) ctx.lineTo(500,320) ctx.lineTo(100,250) ctx.stroke() //  ,

निकट भविष्य में (सिद्धांत रूप में, दो दिनों के लिए)

स्टाइलाइजेशन, ग्रेडिएंट्स और शैडो।
चित्र और पाठ खींचना
परिवर्तन और संरचना
एनीमेशन और हेरफेर छविडटा

एक और कैनवस गाइड [1]: कैनवस तत्व, आयतें, रास्ते