HTML Canvas ट्यूटोरियल

HTML <canvas> एलीमेंट वेबपेज पर ग्राफिक्स ड्राइंग के लिए उपयोग किया जाता है।

ऊपरी ग्राफिक्स <canvas> के द्वारा बनाया गया है।

यह चार एलीमेंटों को दिखाता है: लाल चतुर्भुज, शान्ति चतुर्भुज, बहुरंगी चतुर्भुज और बहुरंगी पाठ।

HTML Canvas क्या है?

HTML <canvas> एलीमेंट स्क्रिप्ट (आमतौर पर JavaScript) के माध्यम से ग्राफिक्स को डायनेमिक रूप से ड्रा करने के लिए उपयोग किया जाता है。

<canvas> एलीमेंट केवल ग्राफिक्स का कंटेनर है। आपको वास्तविक ग्राफिक्स ड्रा करने के लिए स्क्रिप्ट (आमतौर पर JavaScript) का उपयोग करना होगा।

Canvas के अनेक तरीके हैं जो पथ, बॉक्स, गोले, पाठ और छवि ड्रा करने और जोड़ने के लिए हैं।

HTML Canvas को पाठ ड्रा कर सकता है

Canvas को रंगीन पाठ ड्रा कर सकता है और इसमें एनीमेशन भी हो सकती है।

HTML Canvas को ग्राफिक्स ड्रा कर सकता है

Canvas को ग्राफिक्स और चित्रों के रूप में डेटा का प्रदर्शन करने के लिए मजबूत क्षमता है।

HTML Canvas को एनीमेट किया जा सकता है

Canvas ऑब्जैक्ट गति पकड़ सकते हैं। सब कुछ संभव है: साधारण गोला खेल से लेकर जटिल एनीमेशन तक।

HTML Canvas इंटरैक्टिव है

Canvas किसी भी JavaScript इवेंट को प्रतिसाद दे सकता है।

Canvas किसी भी उपयोगकर्ता ऑपरेशन (क्लिक, माउस क्लिक, बटन क्लिक, हाथ की गति) को प्रतिसाद दे सकता है।

HTML Canvas का उपयोग गेम के लिए किया जा सकता है

Canvas के एनीमेशन मेथड एचटीएमएल गेम एप्लिकेशन को कई संभावनाएं प्रदान करते हैं।

Canvas उदाहरण

HTML में, <canvas> एलीमेंट इस तरह दिखता है:

<canvas id="myCanvas" width="200" height="100"></canvas>

<canvas> एलीमेंट के पास id एट्रिब्यूट होना चाहिए ताकि JavaScript इसे संदर्भित कर सके।

width और height एट्रिब्यूट चित्रांकन के आकार को परिभाषित करने के लिए भी आवश्यक हैं।

सूचना: एक HTML पृष्ठ पर कई <canvas> एलीमेंट हो सकते हैं।

डिफ़ॉल्ट में, <canvas> एलीमेंट का कोई घिरा नहीं है और कोई सामग्री नहीं है।

किसी घिरे को जोड़ने के लिए style एट्रिब्यूट का उपयोग करें:

उदाहरण

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

स्वयं आज़माएं

अगले अध्याय में चित्रांकन कैसे करने को बताया जाएगा।

और देखें:

CodeW3C.com का पूर्ण Canvas संदर्भ पुस्तिका

ब्राउज़र समर्थन

<canvas> एलीमेंट HTML5 मानक (2014) है।

सभी आधुनिक ब्राउज़र <canvas> को समर्थित करते हैं: