लोड हो रहा है...

HTML कैनवास मूल बातें

HTML कैनवास मूल बातें वे बुनियादी अवधारणाएँ हैं जो वेब पेज पर ग्राफ़िक्स और एनिमेशन बनाने के लिए उपयोग की जाती हैं। कैनवास (Canvas) एक HTML तत्व है जो एक खाली क्षेत्र प्रदान करता है जहाँ जावास्क्रिप्ट के माध्यम से पिक्सेल स्तर पर ड्राइंग की जा सकती है। यह वेब डेवलपमेंट में बहुत महत्वपूर्ण है क्योंकि यह इंटरैक्टिव विज़ुअल कंटेंट जैसे कि चार्ट, गेम, डाइनेमिक इमेज और ग्राफ़िक्स बनाने में मदद करता है।
जैसे घर बनाना हो — सबसे पहले आधार तैयार करना होता है, उसी तरह कैनवास एक खाली कागज़ की तरह है जहाँ आप अपनी कल्पना के अनुसार चित्र बना सकते हैं। इसे पोर्टफोलियो वेबसाइट में अपने काम को आकर्षक तरीके से दिखाने के लिए, ब्लॉग में डेटा विज़ुअलाइज़ेशन के लिए, ई-कॉमर्स में उत्पादों के अनुकूलन के लिए, न्यूज साइट में इन्फोग्राफिक्स दिखाने के लिए या सोशल प्लेटफॉर्म पर यूजर इंटरैक्शन बढ़ाने के लिए इस्तेमाल किया जा सकता है।
इस ट्यूटोरियल में आप सीखेंगे कि कैसे HTML में कैनवास सेट करें, जावास्क्रिप्ट का उपयोग करके बेसिक शेप्स बनाएं, रंग भरें और टेक्स्ट ड्रॉ करें। यह ज्ञान आपको कैनवास के मूल उपकरणों से परिचित कराएगा, ताकि आप जटिल ग्राफिक्स और इंटरैक्शन के लिए मजबूत आधार बना सकें।

मूल उदाहरण

html

HTML Code

<!DOCTYPE html>

<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #000000;"></canvas>
<script>
// Get canvas element and 2D drawing context
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Set fill color
ctx.fillStyle = 'green';
// Draw filled rectangle
ctx.fillRect(30, 40, 200, 80);
</script>
</body>
</html>

इस उदाहरण में सबसे पहले <canvas> टैग HTML में एक 300x150 पिक्सेल का खाली क्षेत्र बनाता है, जिसके चारों ओर 1 पिक्सेल की काली बॉर्डर है, जिससे कैनवास स्पष्ट दिखाई देता है।
getElementById('myCanvas') से हम उस कैनवास तत्व को चुनते हैं, और getContext('2d') 2D ग्राफिक्स ड्राइंग के लिए एक कंटेक्स्ट प्राप्त करता है। यह वह ऑब्जेक्ट है जिसके माध्यम से हम ड्राइंग कमांड भेजते हैं।
fillStyle प्रॉपर्टी ड्राइंग के लिए रंग निर्धारित करती है, यहाँ हरा (green) सेट किया गया है। फिर fillRect(30, 40, 200, 80) एक भरा हुआ आयत बनाता है जिसका शीर्ष-बायाँ कोना (30, 40) पर है, जिसकी चौड़ाई 200 और ऊँचाई 80 पिक्सेल है।
यह बेसिक उदाहरण दिखाता है कि कैनवास पर ड्राइंग करने के लिए पहले हमें एक संदर्भ (context) प्राप्त करना होता है, फिर हम रंग और आकृति निर्दिष्ट करते हैं। इस तरह का ज्ञान पोर्टफोलियो या ब्लॉग में सरल ग्राफिक्स के लिए आधार बनता है।

व्यावहारिक उदाहरण

html

HTML Code

<!DOCTYPE html>

<html>
<body>
<canvas id="salesChart" width="500" height="300" style="border:1px solid #333;"></canvas>
<script>
const canvas = document.getElementById('salesChart');
const ctx = canvas.getContext('2d');

// Background gradient
const gradient = ctx.createLinearGradient(0, 0, 500, 0);
gradient.addColorStop(0, '#89f7fe');
gradient.addColorStop(1, '#66a6ff');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 500, 300);

// Data array representing sales
const sales = \[120, 200, 150, 80, 100];
const barWidth = 70;
const gap = 30;
ctx.fillStyle = '#1e3c72';
for(let i = 0; i < sales.length; i++){
const x = i * (barWidth + gap) + 50;
const y = 300 - sales\[i];
ctx.fillRect(x, y, barWidth, sales\[i]);
}

// Add title text
ctx.font = '24px Arial';
ctx.fillStyle = '#fff';
ctx.fillText('साप्ताहिक बिक्री रिपोर्ट', 150, 40); </script>

</body>
</html>

यह व्यावहारिक उदाहरण एक साप्ताहिक बिक्री रिपोर्ट के लिए एक साधारण बार चार्ट बनाता है। सबसे पहले, createLinearGradient के जरिए क्षैतिज रंग ग्रेडिएंट बनाया जाता है जो कैनवास के पूरे बैकग्राउंड पर लगाया जाता है। यह एक आकर्षक दृश्य प्रदान करता है जो ई-कॉमर्स वेबसाइट या न्यूज पोर्टल में इस्तेमाल हो सकता है।
डेटा एक एरे (sales) में रखा गया है, जो प्रत्येक बार की ऊँचाई को दर्शाता है। for लूप के माध्यम से प्रत्येक बार की x स्थिति, y स्थिति और आकार निर्धारित होता है। ध्यान दें कि y का मूल्य कैनवास की ऊँचाई से घटाकर सेट किया जाता है क्योंकि कैनवास की y-कोऑर्डिनेट ऊपर से नीचे बढ़ती है।
fillText का उपयोग करके शीर्षक जोड़ा गया है, जिससे यह चार्ट यूजर के लिए समझने में आसान और पेशेवर दिखता है। इस प्रकार का विज़ुअल कंटेंट पर्सनल पेज, ब्लॉग, या पोर्टफोलियो में डाटा को स्पष्टता से प्रस्तुत करने में मदद करता है।

सर्वश्रेष्ठ अभ्यास और सामान्य गलतियाँ
सर्वश्रेष्ठ अभ्यास:

हमेशा <canvas> के width और height एट्रिब्यूट सेट करें, ताकि CSS स्केलिंग से ग्राफिक्स धुंधले न हों।
ARIA लेबल और समर्पित टेक्स्ट के साथ पहुँच (accessibility) को बेहतर बनाएं, क्योंकि कैनवास स्वयं स्क्रीन रीडर के लिए समझ में नहीं आता।
ड्राइंग को मॉड्यूलर तरीके से लिखें, ताकि कोड में पुन: उपयोग और रखरखाव आसान हो।
बार-बार ड्राइंग करने से पहले clearRect का उपयोग करें, ताकि पुरानी ड्राइंग हट जाए और परतें ओवरलैप न करें।
सामान्य गलतियाँ:

getContext('2d') न लेना जिससे ड्राइंग असंभव हो जाती है।
केवल CSS से आकार बदलना, जिससे कैनवास पिक्सेल-आधारित ग्राफिक्स खराब हो सकते हैं।
नए पथ के लिए beginPath() भूल जाना, जिससे आकृतियाँ एक-दूसरे से जुड़ जाती हैं।
डेवलपमेंट में कैनवास का बॉर्डर न दिखाना जिससे पता लगाना मुश्किल होता है।
डिबगिंग टिप्स:
DevTools में कैनवास के आकार की जांच करें।
आकृतियों को एक-एक करके ड्रॉ करें।
अस्थायी रूप से बॉर्डर या बैकग्राउंड रंग जोड़ें।
जावास्क्रिप्ट कंसोल में त्रुटियाँ देखें।

📊 त्वरित संदर्भ

Property/Method	Description	Example
getContext('2d')	2D ड्राइंग संदर्भ प्राप्त करता है	const ctx = canvas.getContext('2d');
fillStyle	फॉर्म की भराई का रंग या पैटर्न सेट करता है	ctx.fillStyle = 'red';
fillRect(x, y, width, height)	भरा हुआ आयत बनाता है	ctx.fillRect(10, 10, 100, 50);
beginPath()	नया पथ शुरू करता है	ctx.beginPath();
arc(x, y, radius, startAngle, endAngle)	वृत्त या चाप बनाता है	ctx.arc(60, 60, 30, 0, 2 * Math.PI);
fillText(text, x, y)	कैनवास पर टेक्स्ट ड्रॉ करता है	ctx.fillText('नमस्ते', 50, 80);

सारांश और अगले कदम
इस ट्यूटोरियल में आपने HTML कैनवास की मूल बातें सीखी: कैनवास तत्व बनाना, 2D संदर्भ प्राप्त करना, सरल आकृतियाँ बनाना और टेक्स्ट जोड़ना। यह समझना आवश्यक है कि कैनवास वेब पेज के लिए एक खाली कैनवास की तरह है, जिसे आप अपनी आवश्यकताओं के अनुसार चित्रित कर सकते हैं।
CSS और JavaScript के साथ मिलकर कैनवास इंटरैक्टिव और आकर्षक वेब सामग्री बनाने में मदद करता है। अगला कदम हो सकता है: कैनवास पर एनिमेशन बनाना, उपयोगकर्ता की इंटरैक्शन जोड़ना, या उन्नत लाइब्रेरी जैसे Fabric.js सीखना।
नियमित अभ्यास और छोटे-छोटे प्रोजेक्ट बनाकर आप कैनवास पर महारत हासिल कर सकते हैं और वेब पर ग्राफिक्स की दुनिया में आगे बढ़ सकते हैं।

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपना ज्ञान परखें

व्यावहारिक प्रश्नों के साथ इस विषय की अपनी समझ का परीक्षण करें।

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा