🙋🏼 🚩 👨🏿 कैनवस एपीआई मेमो 👩🏿‍🤝‍👨🏾 👨🏾‍🎓 📏

शुभ दिन, दोस्तों!

यह लेख कैनवस एपीआई के साथ काम करने के उदाहरणों का एक छोटा सा चयन है, जो अध्ययन की गई सामग्री को याद करने के लिए आवश्यक होने पर संदर्भित करने के लिए सुविधाजनक है।

यह कैनवास के साथ काम करने के लिए एक मार्गदर्शक नहीं है, बल्कि केवल इसकी क्षमताओं का प्रदर्शन है।

मेरे लिए, यह कैनवास के अध्ययन में एक प्रकार का उप-योग भी है।

कोड को अलग-अलग सैंडबॉक्स ब्लॉकों में विभाजित किया गया है, जिन्हें पठनीयता के लिए "कट" के तहत रखा गया है।

कुछ महत्वपूर्ण बिंदु।

कैनवास की चौड़ाई और ऊंचाई विशेषताओं का उपयोग करके बेहतर निर्धारित की जाती है:

<canvas width="300" height="300"></canvas>

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

const width = canvas.width = innerWidth
const height = canvas.height = innerHeight

मैं आमतौर पर कैनवास और दो-आयामी ड्राइंग संदर्भ को इस प्रकार परिभाषित करता हूं:

const canvas = document.querySelector('canvas')
//     jQuery
const $ = canvas.getContext('2d')

पर्याप्त शब्द।

सरल आकार के साथ शुरू करते हैं।

रेखा:

आयत (वर्ग):

त्रिभुज:

एक क्षेत्र में:

बेजियर घटता:

द्विघात वक्र:

घन घटता:

चलिए कुछ प्रयोग करते हैं।

रेखा का रंग:

रंग भरें:

पारदर्शिता (अल्फा चैनल):

पारदर्शिता (RGBA):

हम आगे बढ़ते हैं।

पाठ:

पाठ (फ़ॉन्ट) मीट्रिक:

ढाल:

चित्र:

पैटर्न (पैटर्न):

हम कई कार्यों को कार्यान्वित करते हैं।

बहुभुज ड्राइंग समारोह:

हिमपात का एक खंड ड्राइंग समारोह:

पाठ लपेटें समारोह:

: .

कर्सर के निर्देशांक प्राप्त करने का कार्य:

हम आगे बढ़ते हैं।

छवि का रंग निर्धारित करें:

( ) : harryheman.imtqy.com/art.jpg.

बूट आइकन ड्रा करें:

हम कर्सर ट्रैकिंग लागू करते हैं:

एक इंटरैक्टिव पाठ बनाएँ:

यह सभी देखें:

आपके समय के लिए शुक्रिया। मुझे आशा है कि यह अच्छी तरह से खर्च किया गया था।

कैनवस एपीआई मेमो

More articles: