एचटीएमएल कैनवास ट्यूटोरियल

HTML <कैनवास> तत्व का उपयोग वेब पेज पर ग्राफिक्स बनाने के लिए किया जाता है।

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

यह चार तत्वों को दिखाता है: एक लाल आयत, एक ढाल आयत, एक बहुरंगा आयत और एक बहुरंगा पाठ।

एचटीएमएल कैनवास क्या है?

HTML <कैनवास> तत्व का उपयोग स्क्रिप्टिंग (आमतौर पर जावास्क्रिप्ट) के माध्यम से, मक्खी पर ग्राफिक्स बनाने के लिए किया जाता है।

<कैनवास> तत्व ग्राफिक्स के लिए केवल एक कंटेनर है। वास्तव में ग्राफ़िक्स बनाने के लिए आपको एक स्क्रिप्ट का उपयोग करना चाहिए।

कैनवास में पथ, बॉक्स, वृत्त, पाठ, और चित्र जोड़ने की कई विधियाँ हैं।

तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो <कैनवास> तत्व का पूर्ण समर्थन करता है।

Element
<canvas>	4.0	9.0	2.0	3.1	9.0

कैनवास रंगीन टेक्स्ट बना सकता है, एनिमेशन के साथ या उसके बिना।

ग्राफ़ और चार्ट की इमेजरी के साथ चित्रमय डेटा प्रस्तुति के लिए कैनवास में शानदार विशेषताएं हैं।

कैनवास की वस्तुएं चल सकती हैं। सब कुछ संभव है: साधारण उछलती गेंदों से लेकर जटिल एनिमेशन तक।

कैनवास जावास्क्रिप्ट घटनाओं का जवाब दे सकता है।

कैनवास किसी भी उपयोगकर्ता कार्रवाई (कुंजी क्लिक, माउस क्लिक, बटन क्लिक, उंगली आंदोलन) का जवाब दे सकता है।

एनिमेशन के लिए कैनवास के तरीके, HTML गेमिंग अनुप्रयोगों के लिए बहुत सारी संभावनाएं प्रदान करते हैं।

एचटीएमएल में, एक <कैनवास> तत्व इस तरह दिखता है:

<कैनवास> तत्व में एक आईडी विशेषता होनी चाहिए ताकि इसे जावास्क्रिप्ट द्वारा संदर्भित किया जा सके।

कैनवास के आकार को परिभाषित करने के लिए चौड़ाई और ऊंचाई विशेषता आवश्यक है।

युक्ति: आपके पास एक HTML पृष्ठ पर एकाधिक <कैनवास> तत्व हो सकते हैं।

डिफ़ॉल्ट रूप से, <कैनवास> तत्व की कोई सीमा नहीं है और कोई सामग्री नहीं है।

सीमा जोड़ने के लिए, शैली विशेषता का उपयोग करें:

अगले अध्याय दिखाते हैं कि कैनवास पर कैसे आकर्षित किया जाए।