🐰 😾 🛍️ प्रगति संकेतक HTML5 कैनवस का उपयोग करना 🧑🏽 💇🏼 👿

हेलो, हेब्र!

अधिक से अधिक लेख कैनवास के बारे में दिखाई दे रहे हैं, और यह अच्छी खबर है। मूल रूप से , मूल रूप से , पहले से ही अध्ययन किया गया है, लेकिन मैं एक एनिमेटेड प्रगति संकेतक बनाने के लिए कैनवास के संभावित व्यावहारिक उपयोग का एक उदाहरण साझा करना चाहूंगा।

अधीर प्रयोग परिणामों के लिए, यहाँ देखें: http://pastehtml.com/view/1d7z824.html , साथ ही अंतिम परिणाम का एक स्क्रीनशॉट:

प्रगति बार काफी सरल निकला, लेकिन एक ही समय में वेब 2.0 शैली में - गोल (निश्चित रूप से!), गहराई और मात्रा के तत्वों के साथ: अर्थात्, छाया और ग्रेडिएंट।

मैं बिल्ली के नीचे विवरण मांगता हूं।

उपजाऊ

आइए पृष्ठभूमि को चित्रित करके शुरू करें, जो प्रगति से भर जाएगा। हम चाप () फ़ंक्शन का उपयोग करते हुए आयत के सिरों पर गोल बनाएंगे, इसलिए, इस मामले में, आयत हमेशा अर्धवृत्त द्वारा सिरों पर गोल किया जाएगा; उनके बीच का सेगमेंट (एक अर्धवृत्त के साथ एक बिंदु तक पतित होना, जैसा कि हमारे मामले में है)। तो, सब्सट्रेट की भरी हुई रूपरेखा बनाने का कार्य इस तरह दिखेगा:

function roundRect(ctx, x, y, width, height, radius) { ctx.beginPath(); ctx.moveTo(x + radius, y); ctx.lineTo(x + width - radius, y); ctx.arc(x+width-radius, y+radius, radius, -Math.PI/2, Math.PI/2, false); ctx.lineTo(x + radius, y + height); ctx.arc(x+radius, y+radius, radius, Math.PI/2, 3*Math.PI/2, false); ctx.closePath(); ctx.fill(); }

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

 function progressLayerRect(ctx, x, y, width, height, radius) { ctx.save(); //   ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 5; ctx.shadowColor = '#666'; //    ctx.fillStyle = 'rgba(189,189,189,1)'; roundRect(ctx, x, y, width, height, radius); //     //   ctx.shadowColor = 'rgba(0,0,0,0)'; var lingrad = ctx.createLinearGradient(0,y+height,0,0); lingrad.addColorStop(0, 'rgba(255,255,255, 0.1)'); lingrad.addColorStop(0.4, 'rgba(255,255,255, 0.7)'); lingrad.addColorStop(1, 'rgba(255,255,255,0.4)'); ctx.fillStyle = lingrad; roundRect(ctx, x, y, width, height, radius); ctx.restore(); }

यहां दो परतों का उपयोग किया जाता है - नीचे ठोस ग्रे होता है और शीर्ष पारदर्शी ढालों के साथ सफेद होता है। मेरी राय में, यह आपको सब्सट्रेट की स्पष्ट सीमाओं को प्राप्त करने की अनुमति देता है और अधिक यथार्थवादी दिखता है, किसी भी मामले में, आप हमेशा सभी रंग सेटिंग्स के साथ प्रयोग कर सकते हैं।

यदि सब कुछ सही ढंग से किया गया था, तो आपको कुछ इस तरह से मिलना चाहिए:

प्रगति सूचक

अब एक प्रगति-भरने भरण बनाने के लिए आगे बढ़ते हैं।

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

साथ ही, इसे वॉल्यूम प्रभाव देने के लिए प्रगति के दाहिने किनारे से एक छाया जोड़ें।

परिणामस्वरूप, हमें निम्नलिखित प्रगति प्रतिपादन कोड प्राप्त होते हैं:

 function progressBarRect(ctx, x, y, width, height, radius, max) { //     var offset = 0; ctx.beginPath(); if (width<radius) { offset = radius - Math.sqrt(Math.pow(radius,2)-Math.pow((radius-width),2)); //   var left_angle = Math.acos((radius - width) / radius); ctx.moveTo(x + width, y+offset); ctx.lineTo(x + width, y+height-offset); ctx.arc(x + radius, y + radius, radius, Math.PI - left_angle, Math.PI + left_angle, false); } else if (width+radius>max) { offset = radius - Math.sqrt(Math.pow(radius,2)-Math.pow((radius - (max-width)),2)); //   var right_angle = Math.acos((radius - (max-width)) / radius); ctx.moveTo(x + radius, y); ctx.lineTo(x + width, y); ctx.arc(x+max-radius, y + radius, radius, -Math.PI/2, -right_angle, false); ctx.lineTo(x + width, y+height-offset); ctx.arc(x+max-radius, y + radius, radius, right_angle, Math.PI/2, false); ctx.lineTo(x + radius, y + height); ctx.arc(x+radius, y+radius, radius, Math.PI/2, 3*Math.PI/2, false); } else { ctx.moveTo(x + radius, y); ctx.lineTo(x + width, y); ctx.lineTo(x + width, y + height); ctx.lineTo(x + radius, y + height); ctx.arc(x+radius, y+radius, radius, Math.PI/2, 3*Math.PI/2, false); } ctx.closePath(); ctx.fill(); //   if (width<max-1) { ctx.save(); ctx.shadowOffsetX = 1; ctx.shadowBlur = 1; ctx.shadowColor = '#666'; if (width+radius>max) offset = offset+1; ctx.fillRect(x+width,y+offset,1,total_height-offset*2); ctx.restore(); } }

यहां, पिछले फ़ंक्शन के विपरीत, हम सब्सट्रेट के मामले में संदर्भ को सहेजते और पुनर्स्थापित नहीं करते हैं, क्योंकि हम प्रगति के लिए वैश्विक संदर्भ विशेषताओं को सेट करने जा रहे हैं।

प्रगति पाठ

यह एक प्रतिशत के रूप में प्रगति की स्थिति का वर्णन करने वाले पाठ को जोड़ने के लिए बना हुआ है। पाठ सीधे प्रगति की दाईं ओर स्थित होगा यदि पाठ की लंबाई प्रगति की लंबाई से कम है, या प्रगति के बाएं किनारे पर अन्यथा। परीक्षण की लंबाई को मापने के लिए, मापक () फ़ंक्शन का उपयोग करें:

 function progressText(ctx, x, y, width, height, radius, max) { ctx.save(); ctx.fillStyle = 'white'; var text = Math.floor(width/max*100)+"%"; var text_width = ctx.measureText(text).width; var text_x = x+width-text_width-radius/2; if (width<=radius+text_width) { text_x = x+radius/2; } ctx.fillText(text, text_x, y+22); ctx.restore(); }

प्रगति का पूर्ण सूचक

अब यह सभी हिस्सों को एक साथ जोड़ने और एक एनीमेशन सेट करने के लिए बना हुआ है जो 0 से 100% तक प्रगति को भरता है। एनीमेशन के लिए, हम फ़ंक्शन सेटइंटरवल () और क्लियरइंटरवल () का उपयोग करते हैं :

 //      var i = 0; var res = 0; var context = null; var total_width = 300; var total_height = 34; var initial_x = 20; var initial_y = 20; var radius = total_height/2; window.onload = function() { //   canvas var elem = document.getElementById('myCanvas'); //   canvas  if (!elem || !elem.getContext) { return; } context = elem.getContext('2d'); if (!context) { return; } //    context.font = "16px Verdana"; //    var progress_lingrad = context.createLinearGradient(0,initial_y+total_height,0,0); progress_lingrad.addColorStop(0, '#4DA4F3'); progress_lingrad.addColorStop(0.4, '#ADD9FF'); progress_lingrad.addColorStop(1, '#9ED1FF'); context.fillStyle = progress_lingrad; //   res = setInterval(draw, 50); } function draw() { //    1    i+=1; //    context.clearRect(initial_x-5,initial_y-5,total_width+15,total_height+15); progressLayerRect(context, initial_x, initial_y, total_width, total_height, radius); progressBarRect(context, initial_x, initial_y, i, total_height, radius, total_width); progressText(context, initial_x, initial_y, i, total_height, radius, total_width ); //     100% if (i>=total_width) { clearInterval(res); } }

यह सब है, यह जावास्क्रिप्ट कोड को <script> टैग में और दस्तावेज़ जोड़ने के <body> में रखता है:

 <canvas id="myCanvas" width="500" height="150">Your browser does not have support for canvas.</canvas>

एक बार फिर, परिणाम का लिंक: http://pastehtml.com/view/1d7z824.html

इनसेट शैडो

निष्कर्ष में, मैंने इनसेट छाया का उपयोग करके सब्सट्रेट की एक अलग शैली तैयार की, जिस स्थिति में सब्सट्रेट अंदर की ओर दबाया हुआ प्रतीत होगा। यहाँ से लिया गया मूल विचार: http://weblog.bocoup.com/can-i-draw-an-inset-shadow-with-the-html5-canvas-api

तथ्य यह है कि कैनवास में इनसेट छाया को सीएसएस के रूप में सरल बनाने का कोई मतलब नहीं है, और उपरोक्त विधि का सार "ओपोसिट वाइंडिंग" नामक एक तकनीक का उपयोग करना है, जो कैनवास पर भी लागू होता है।

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

इनसेट शैडो इफ़ेक्ट पाने के लिए, एक नया राउंड इनसेट Rect () फंक्शन बनाएं और प्रोग्रेसलेयर रेक्ट () फंक्शन को संशोधित करें:

 function roundInsetRect(ctx, x, y, width, height, radius) { ctx.beginPath(); //       ctx.moveTo(1000, 1000); ctx.lineTo(1000, -1000); ctx.lineTo(-1000, -1000); ctx.lineTo(-1000, 1000); ctx.lineTo(1000, 1000); ctx.moveTo(x + radius, y); ctx.lineTo(x + width - radius, y); ctx.arc(x+width-radius, y+radius, radius, -Math.PI/2, Math.PI/2, false); ctx.lineTo(x + radius, y + height); ctx.arc(x+radius, y+radius, radius, Math.PI/2, 3*Math.PI/2, false); ctx.closePath(); ctx.fill(); } function progressLayerRect(ctx, x, y, width, height, radius) { ctx.save(); //   ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 5; ctx.shadowColor = '#666'; //    ctx.fillStyle = 'rgba(189,189,189,1)'; roundRect(ctx, x, y, width, height, radius); ctx.fillStyle = 'white'; roundInsetRect(ctx, x, y, width, height, radius); ctx.restore(); }

यह कैसे दिखता है यह यहां देखा जा सकता है: http://pastehtml.com/view/1d80e6t.html

मैं कार्यान्वयन पर टिप्पणियों / परिवर्धन को एक बार सुनूंगा, मुझे आशा है कि यह उपयोगी होगा।

प्रगति संकेतक HTML5 कैनवस का उपयोग करना

उपजाऊ

प्रगति सूचक

प्रगति पाठ

प्रगति का पूर्ण सूचक

इनसेट शैडो

More articles: