यदि आप अपनी वेबसाइट में सहभागी तत्वों को जोड़ना चाहते हैं, तो कैनवास के लिए निःशुल्क पुस्तकालय आपके काम को आसान बना सकते हैं। सबसे पहले, आइए चर्चा करें कि HTML5 में कैनवास कैसे बनाया जाता है।
HTML <कैनवास> टैग का उपयोग स्क्रिप्टिंग का उपयोग करके ग्राफिक्स, एनिमेशन आदि को आकर्षित करने के लिए किया जाता है। <कैनवास> टैग HTML5 में पेश किया गया है।
आप निम्न कोड को चलाने का प्रयास कर सकते हैं, जो HTML5 में एक कैनवास बनाता है
उदाहरण
<!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 में कैनवास के लिए कौन-सी निःशुल्क लाइब्रेरी आपकी वेबसाइट पर अद्भुत प्रभाव जोड़ने में मदद कर सकती है।
Fabric.js
Fabric.js एक शक्तिशाली JavaScript HTML5 कैनवास लाइब्रेरी है, जिसका व्यापक रूप से कैनवास तत्व के शीर्ष पर इंटरैक्टिव ऑब्जेक्ट मॉडल प्रदान करने के लिए उपयोग किया जाता है।
Fabric.js का उपयोग करके, कैनवास पर ऑब्जेक्ट बनाएं और पॉप्युलेट करें यानी साधारण ज्यामितीय आकृतियों जैसी ऑब्जेक्ट। साथ ही, आकार को ढाल देना आसान है। आसानी से टेक्स्ट जोड़ें और संरेखण, आकार, आदि में गतिशील रूप से हेरफेर करें।
Paper.js
यह एक ओपन सोर्स वेक्टर ग्राफिक्स स्क्रिप्टिंग फ्रेमवर्क है, जो HTML5 कैनवास के शीर्ष पर चलता है।
Paper.js एक दस्तावेज़ ऑब्जेक्ट मॉडल प्रदान करता है, आसानी से परतों, समूहों, पथों आदि के साथ एक प्रोजेक्ट बना और पॉप्युलेट करता है। पथ बनाएं और उनमें सेगमेंट जोड़ें। पथ खंडों का एक क्रम है जो वक्रों से जुड़े होते हैं।
खंडों का आसानी से निरीक्षण किया जा सकता है, हेरफेर किया जा सकता है, और जोड़ने के बाद इधर-उधर किया जा सकता है। आप सेगमेंट को आसानी से हटा भी सकते हैं। वेक्टर ग्राफिक्स को एसवी के रूप में आयात और निर्यात करने के तरीके भी प्राप्त करें
चार्ट.जेएस
यह एक ओपन सोर्स जावास्क्रिप्ट लाइब्रेरी है, जो आपके डेटा को 8 अलग-अलग तरीकों से विज़ुअलाइज़ करती है। सभी आधुनिक ब्राउज़रों में इसका उत्कृष्ट प्रतिपादन प्रदर्शन है। विंडो आकार में आसानी से चार्ट को फिर से बनाएं ताकि सही स्केल ग्रैन्युलैरिटी हो सके।
Chart.js अंतर्निर्मित चार्ट प्रदान करता है और इन्हें कस्टम चार्ट में आसानी से बढ़ाया जा सकता है। बिल्ट-इन चार्ट में लाइन, बार, हॉरिजॉन्टल बार, स्कैटर, बबल आदि शामिल हैं।