यदि आपको अपनी वेबसाइट पर इंटरैक्टिव एलिमेंट्स जोड़ने की आवश्यकता है, तो Canvas के लिए फ्री लाइब्रेरीज़ आपका काम आसान कर सकती हैं। पहले, आइए चर्चा करें कि HTML5 में Canvas कैसे बनाएं।
HTML <canvas> टैग का उपयोग स्क्रिप्टिंग का उपयोग करके ग्राफिक्स, एनिमेशन आदि ड्रा करने के लिए किया जाता है। <canvas> टैग HTML5 में पेश किया गया था।
उदाहरण
HTML5 में Canvas बनाने वाले निम्न कोड को चलाएं:
<!DOCTYPE html> <html> <head> <title>HTML5 Canvas Tag</title> </head> <body> <canvas id="myCanvas"></canvas> <script> var c = document.getElementById('myCanvas'); var ctx = c.getContext('2d'); ctx.fillStyle = '#7cce2b'; ctx.fillRect(0, 0, 300, 100); </script> </body> </html> अब, आइए देखें कि HTML5 में Canvas के लिए कौन सी फ्री लाइब्रेरीज़ आपकी वेबसाइट पर अद्भुत प्रभाव जोड़ने में मदद कर सकती हैं।
Fabric.js
Fabric.js एक शक्तिशाली JavaScript HTML5 Canvas लाइब्रेरी है, जिसका व्यापक रूप से कैनवास एलिमेंट के ऊपर इंटरैक्टिव ऑब्जेक्ट मॉडल प्रदान करने के लिए उपयोग किया जाता है।
Fabric.js का उपयोग करके, कैनवास पर ऑब्जेक्ट्स बनाएं और पॉप्युलेट करें यानी सिंपल ज्योमेट्रिकल शेप्स जैसे ऑब्जेक्ट्स। साथ ही, किसी शेप को ग्रेडिएंट देना आसान है। टेक्स्ट आसानी से जोड़ें और अलाइनमेंट, साइज़ आदि को डायनामिकली मैनिपुलेट करें।
Paper.js
यह एक ओपन सोर्स वेक्टर ग्राफिक्स स्क्रिप्टिंग फ्रेमवर्क है, जो HTML5 Canvas के ऊपर चलता है।
Paper.js एक डॉक्यूमेंट ऑब्जेक्ट मॉडल प्रदान करता है, आसानी से लेयर्स, ग्रुप्स, पाथ्स आदि के साथ एक प्रोजेक्ट बनाएं और पॉप्युलेट करें। पाथ्स बनाएं और उनमें सेगमेंट्स जोड़ें। पाथ्स कर्व्स से जुड़े सेगमेंट्स का एक क्रम होता है।
सेगमेंट्स को जोड़ने के बाद आसानी से इंस्पेक्ट, मैनिपुलेट और मूव किया जा सकता है। आप सेगमेंट्स को आसानी से हटा भी सकते हैं। साथ ही वेक्टर ग्राफिक्स को SVG के रूप में इम्पोर्ट और एक्सपोर्ट करने के मेथड्स प्राप्त करें।
Chart.js
यह एक ओपन सोर्स JavaScript लाइब्रेरी है, जो आपके डेटा को 8 अलग-अलग तरीकों से विज़ुअलाइज़ करती है। सभी मॉडर्न ब्राउज़र्स में शानदार रेंडरिंग परफॉरमेंस। विंडो रीसाइज़ पर चार्ट्स को आसानी से रीड्रा करें परफेक्ट स्केल ग्रैन्युलैरिटी के लिए।
Chart.js बिल्ट-इन चार्ट्स प्रदान करता है और ये कस्टम चार्ट्स के लिए आसानी से एक्सटेंडेबल हैं। बिल्ट-इन चार्ट्स में लाइन, बार, हॉरिजॉन्टल बार, स्कैटर, बबल आदि शामिल हैं।
