एक और कैनवस गाइड [2]: स्टाइलाइजेशन, ग्रेजुएट्स, शैडोज़

परिचय

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

चलो हमारे कैनवास को रंगीन बनाते हैं

जैसा कि आप पहले ही कैनवास में देख चुके हैं, दो प्रकार के फिल और रेक्ट रेंडरिंग ऑपरेशन हैं, और प्रत्येक की अपनी शैली सेटिंग्स हैं। उन्हें बदलने के लिए, आपको भरण और स्ट्रोकसेल के संदर्भ गुणों को बदलने की आवश्यकता है; ये गुण न केवल रंगों को मूल्यों के रूप में ले सकते हैं, बल्कि अन्य मूल्य भी हैं जिनके बारे में हम बाद में चर्चा करेंगे। अब हम रंग बदलने के तरीके को देखेंगे। ऐसा करने के लिए, बस fillStyle और stroStyle गुण को एक नए मान पर सेट करें, रंगों के मामले में, ये स्ट्रिंग्स होंगे, जबकि कैनवास निम्नलिखित रंग विवरण योजनाओं का समर्थन करता है: नारंगी, # FFA500, rgb (255,991,0,0), rgba (255,165,0,1)।
उदाहरण के लिए, हम एक रंगीन वृत्त खींचेंगे, हमारी लिपि में केवल संदर्भ छोड़ेंगे, और फिर निम्नलिखित कोड जोड़ेंगे:

for(var i=0;i<6;i++){ ctx.fillStyle = 'rgb(' + Math.round(Math.random()*255) + ',' + Math.round(Math.random()*255) + ',' + Math.round(Math.random()*255) +')' ctx.beginPath() ctx.arc(300,300,70,Math.PI/3*i,Math.PI/3*(i+1),false) ctx.lineTo(300,300) ctx.fill() } 

जैसा कि एक चौकस पाठक ने अनुमान लगाया, यह कोड मनमाने रंगों के साथ 6 खंडों वाले एक वृत्त को खींचेगा।

चलो लाइनों के साथ काम करते हैं

हम लाइनों के कुछ मापदंडों को भी बदल सकते हैं इसके लिए कई गुण हैं, आइए उनमें से प्रत्येक को क्रम में देखें।

लाइन की चौड़ाई बदलें

लाइन चौड़ाई मान को कैनवास संदर्भ की लाइनवॉथ संपत्ति में संग्रहीत किया जाता है और एक इकाई एक पिक्सेल से मेल खाती है। डिफ़ॉल्ट मान स्वाभाविक रूप से 1.0 है।

लाइन टॉप स्टाइल

लाइन टॉप स्टाइल को लाइनकैप प्रॉपर्टी में स्टोर किया जाता है और इसके लिए तीन संभावित मान हैं: बट, राउंड, स्क्वायर, डिफॉल्ट स्टाइल बट।

लाइन जॉइन स्टाइल

लाइन जॉइन स्टाइल को लाइनजॉइन प्रॉपर्टी में स्टोर किया जाता है और तीन संभावित मान ले सकते हैं: मैटर, राउंड, बेवेल, डिफ़ॉल्ट स्टाइल मैटर है।

मेटर के बारे में थोड़ा और

हम माइटलिमिट प्रॉपर्टी के साथ विशाल मेटर टेल की लंबाई को सीमित कर सकते हैं, जो 10 तक डिफॉल्ट करता है।

छाया डाली

सटीक होने के लिए, कैनवास की छाया हमेशा डाली जाती है, वे बस शून्य ऑफसेट और शून्य धुंधला पर डाली जाती हैं। यह लंबे समय तक छाया पर विचार करने के लायक नहीं है, क्योंकि यहां सब कुछ बहुत स्पष्ट है, छाया को नियंत्रित करने वाले चार गुण हैं (मानक मान संकेत के माध्यम से इंगित किए जाते हैं):

 shadowOffsetX = 0.0 shadowOffsetY = 0.0 shadowBlur = 0.0 shadowColor = "transparent black" 

उदाहरण के लिए, हम एक सीमित ड्राइंग क्षेत्र में एक दूसरे पर दो छाया डालते हैं और देखते हैं कि क्या होता है:

 ctx.beginPath() ctx.arc(200,300,70,0,Math.PI*2,true) ctx.stroke() ctx.clip() ctx.shadowOffsetX = -10 ctx.shadowOffsetY = -10 ctx.shadowBlur = 2 ctx.shadowColor = 'black' ctx.beginPath() ctx.moveTo(100,320) ctx.lineTo(500,320) ctx.moveTo(500,180) ctx.lineTo(100,370) ctx.stroke() 

ग्रेडिएंट का उपयोग करें

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

रैखिक ढाल

एक ग्रेडिएंट ऑब्जेक्ट बनाना

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

- बिंदु (x2; y2) से बिंदु (x2; y2) से गुजरने वाली एक लीनियर ग्रेडिएंट ऑब्जेक्ट बनाएं, हमारे कोड में लाइन जोड़ें:

 var gr = ctx.createLinearGradient(0,0,150,150) 

ढाल में रंग जोड़ें।

 addColorStop(float offset, string color) 

- इंडेंटेशन ऑफसेट के साथ हमारी ढाल में रंग जोड़ें जो 0 से 1 तक मान लेता है।
हमारी स्क्रिप्ट में लाइनें जोड़ें:

 gr.addColorStop(0.0,'blue') gr.addColorStop(0.5,'red') gr.addColorStop(1.0,'green') 

भरण शैली के रूप में ढाल को लागू करें।

कैनवास संदर्भ की भरण संपत्ति न केवल रंग ले सकती है, बल्कि मूल्य के रूप में ढाल भी ले सकती है, स्क्रिप्ट में लाइन जोड़ें:

 ctx.fillStyle = gr 

अंतिम चरण, एक भरा हुआ आयत बनाएं

हमारी स्क्रिप्ट में अंतिम पंक्ति जोड़ें:

 ctx.fillRect(0,0,150,150) 

रेडियल ग्रेडिएंट्स

रेडियल ग्रेडिएंट के साथ काम करते समय, रैखिक ग्रेडिएंट से अंतर केवल निर्माण में होता है।

 createRadialGradient(float x1, float y1, float r1, float x2, float y2, float r2) 

- बिंदु पर केंद्रित वृत्त (X1; y1) और त्रिज्या r1 से बिंदु (x2; y2) और त्रिज्या r2 पर केन्द्रित वृत्त की त्रिज्या से एक चिकनी संक्रमण के साथ एक रेडियल ढाल बनाएं। उदाहरण के लिए, एक गेंद खींचना और छद्म प्रकाश बनाना:

 ctx.shadowOffsetX = 10 ctx.shadowOffsetY = 15 ctx.shadowBlur = 10 ctx.shadowColor = '#0F0' var gr = ctx.createRadialGradient(60,60,15,75,75,75) gr.addColorStop(0.0,'#0F0') gr.addColorStop(1.0,'#0DA805') ctx.fillStyle = gr ctx.beginPath() ctx.arc(75,75,75,0,Math.PI*2,false) ctx.fill() 

हम टेम्पलेट का उपयोग करते हैं

रंग और ग्रेडिएंट्स के अलावा, फिल्सटाइल और स्ट्रोकसिटाइल भी तथाकथित पैटर्न को मान के रूप में ले सकते हैं, पैटर्न एक ही कैनवास तत्व, छवि या वीडियो से बनाया जा सकता है। एक उदाहरण के लिए हम छवि का उपयोग करेंगे। टेम्प्लेट createPattern मेथड (ऑब्जेक्ट कोई, स्ट्रिंग रिपीट) का उपयोग करके बनाया गया है, रिपीट निम्न मान ले सकता है: "रिपीट", "रिपीट-एक्स", "रिपीट-वाई", "नो-रिपीट"। डिफ़ॉल्ट मान "रिपीट" है। उदाहरण के लिए, निम्न स्क्रिप्ट चलाएँ:

 var img = new Image() img.src = 'brick.jpg' var ptr = ctx.createPattern(img,'repeat') ctx.fillStyle = ptr; ctx.fillRect(50,50,100,100)