HTML के पिछले version में canvas नहीं था । तब तक HTML को इतना सफल नहीं माना गया था ।
पर धीरे धीरे version आते रहे और HTML5 में canvas को शामिल किया गया ।
HTML5 में वेब पेज पर ग्राफिक्स(Graphics) खींचने(draw) के लिए canvas शामिल है। कैनवास HTML 4.01 का हिस्सा नहीं है। HTML में canvas को शामिल करना अनोखी जित थी । HTML में graphics को draw करने के लिए canvas ब्लॉक में कोड किया जाता हैं ।
HTML में canvas क्या है?
HTML कैनवस का उपयोग वेब पेज पर javascript की मदद से किया जाता है। कैनवास एक कंटेनर के रूप में काम करता है जिसमें हम विभिन्न प्रकार के graphics बना सकते हैं।
Canvas टैग में चार एलिमेंट rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text। शामिल हैं।
कैनवास के द्वारा ग्राफ़िक्स को आसानी से ड्रॉ किया जाता हैं ।
Canvas की मदद से, हम boxes, circles, text, and images को वेब पेज पर draw कर सकते हैं ।
Canvas का निम्नलिखित उदाहरण हैं जिसमें हम आयत(rectangle) को draw करेंगे।
चलिए एक उदाहरण से समझते हैं जिसमे हम एक आयत (rectangle) को बनाएंगे ।
HTML Canvas
<!DOCTYPE html>
<html>
<head>
<title>HTML Canvas </title>
</head>
<body>
</body>
</html>
Run
1. उपरोक्त उदाहरण में, हमने canvas और canvas id को डिक्लेअर किया हैं , परन्तु इस example में इस आईडी का कोई भी यूज नहीं हैं क्युकी इसमें कोई भी जावास्क्रिप्ट(javascript) नहीं बनाई गयी हैं ।
2. कैनवास की ऊँचाई (height) और चौड़ाई (width) ।
3. बॉर्डर पिक्सेल और रंग( color ) डिफाइन करे
4. यदि page पर आयत(rectangle) डिस्प्ले नहीं होता हैं , तो अपना HTML कोड जांचें और पुनः प्रयास करें। उसके बाद, यदि फिर से rectangle प्रदर्शित नहीं होता है तो इसका मतलब है कि आपका ब्राउज़र canvas को सपोर्ट नहीं कर रहा हैं ।
इस तरह से HTML5 canvas का उपयोग करके एक rectangle बनाया जा सकता हैं ।
रेखा खींचें(Draw लाइन)-
Canvas और javascript का उपयोग करके किसी भी तरह से sवेब पेज पर line को खींच जा सकता हैं । यह ग्राफ़िक्स का बेसिक पार्ट होता हैं जिसको समझना बहुत ही जरुरी होता हैं ।
Rectangle में एक रेखा खींचने के लिए हम रेक्टेंगल के समन्वय (coordinates) का उपयोग करते हैं।
साधारण Hindi भाषा में कहे तो आयत के एक कोने से उसके सामने कोने तक एक रेखा को खींचना इस example से सीखेंगे ।
रेखा java script पर निर्भर करती है जो आयत के अंदर खींची जाती हैं ।
निम्नलिखित उदाहरण आपको आयत के अंदर एक रेखा दिखाएगा।
HTML Canvas
<!DOCTYPE html>
<html>
<head>
<title>HTML Canvas </title>
</head>
<body>
</body>
</html>
Run
उपरोक्त उदाहरण में, हमारे पास line को खींचने के लिए x और y निर्देशांक हैं।
1. कैनवस की ऊँचाई(height) और चौड़ाई (width) 300 है
2. सीमा (border) 1px और बॉर्डर का रंग ठोस काले(solid black) रंग के लिए सेट है।
3. जावास्क्रिप्ट में, हमने एक वैरिएबल ctx को परिभाषित किया और एक id दिया।
4. हमने HTML कोड के अंदर id का उपयोग किया है।
5. ctx.moveTo (0,0) प्रारंभिक समन्वय(co-ordinate) x = 0 और y = 0;
6. ctx.lineTo (300,400)
जहां से एक रेखा खींचने की स्थिति।
x= 300, और y = 400;
इस तरह से एक आयत में कैनवास और जावास्क्रिप्ट की मदत से लाइन को co-ordinates के अनुसार खींचा जा सकता हैं ।
कैनवास टेक्स्ट इफ़ेक्ट (Text effect)-
HTML canvas और javascript की मदद से हम टेक्स्ट इफेक्ट्स को भी आसानी से draw किया जा सकता हैं । टेक्स्ट इफ़ेक्ट से मतलब हैं टेक्स्ट को कुछ अलग डिज़ाइन में फॉर्मेट डिस्प्ले करना ।
इस से आपको basic कैनवास के द्वारा टेक्स्ट इफ़ेक्ट को कैसे draw करते हैं समझा आजायेगा ।
HTML Canvas
<!DOCTYPE html>
<html>
<head>
<title>HTML Canvas </title>
</head>
<body>
</body>
</html>
Run
ऊपर दिए गए example में हमने canvas की height और width को डिफाइन किया हुआ हैं । उसके साथ सात एक inline CSS का भी उपयोग किया गया हैं ।
हटम्ल कैनवास में एक myCanvas नाम से आईडी बनाई हुई हैं जिसकी मदत से JS को कॉल कराया जाता हैं ।
JavaScript में हमने कुछ वेरिएबल बनाये हैं । टेक्स्ट इफ़ेक्ट के लिए फॉण्ट फॅमिली chiller का उपयपग भी किया हैं ।
ग्रेडिएंट कलर इफ़ेक्ट (Gradient Color Effects) -
सबसे पहले gradient color का पता होना चाइये । ग्रेडिएंट कलर का मतलब हैं बहुत सारे कलर को अलग अलग मात्रा में मिलाना । Canvas और javascript की मदत से gradient कलर को भी वेब पेज पर draw किया जा सकता हैं ।
HTML Canvas
<!DOCTYPE html>
<html>
<head>
<title>HTML Canvas </title>
</head>
<body>
</body>
</html>
Run
ऊपर दिए गए example में red और green कलर को अलग अलग वैल्यू पर मिक्स करके ग्रेडिएंट कलर बनाया गया हैं ।
इस तरह से HTML canvas का उपयोग करके ग्राफ़िक को draw किया जा सकता हैं ।
Recommended Posts:-
Live Chat