HTML Canvas
पहले SVG ने तेज़ आइकन वेक्टर मार्कअप या .svg फ़ाइल से रखे। यह पाठ canvas पेश करता है: खाली बिटमैप बॉक्स जिसे JavaScript रंगता है। HTML केवल सतह रखता/आकार देता है; स्क्रिप्ट पिक्सेल खींचती है। दायरा व्यावहारिक — तत्व + छोटा 2D ड्रॉ — पूरा Canvas API/गेम/WebGL कोर्स नहीं।
HTML कोर्स में canvas क्यों
शुरुआती canvas को चार्ट और मिनी गेम में देखते हैं। विभाजन मदद करता है: HTML तत्व का मालिक; JS पिक्सेल का। SVG के बाद canvas दूसरा आम उपकरण दिखाता है। यहाँ getContext("2d") और fillRect काफी हैं।
सीधा उत्तर
1) id, width, height और फ़ॉलबैक टेक्स्ट वाला canvas। 2) JS में getContext("2d")। 3) fillStyle + fillRect से खींचें। 4) ऐट्रिब्यूट बिटमैप रिज़ॉल्यूशन सेट करते हैं। 5) आइकन के लिए SVG; गतिशील पिक्सेल के लिए canvas। 6) केवल परिचय।
📊 Canvas vs SVG for beginners
| Topic | Canvas | SVG |
|---|---|---|
| Drawing model | Bitmap pixels via JavaScript | Vector shapes in markup (or .svg file) |
| Who paints | Scripts on a 2d (or other) context | Browser renders SVG tree |
| Best beginner fit | Dynamic charts, games, freehand | Icons, logos, sharp UI marks |
| Scales when resized | Can blur if only CSS-stretched | Stays sharp as vectors |
| Accessible naming | Label the canvas; drawings are pixels | alt / aria-label on meaningful graphics |
| This course depth | Element + tiny 2d draw | Embed inline or via img |
छोटा canvas तत्व
बिना स्क्रिप्ट canvas खाली आयत है। HTML आकार और id घोषित करता है ताकि स्क्रिप्ट ढूँढे।
<canvas id="demo" width="300" height="150">
Your browser does not support canvas drawing.
</canvas>
शेल पढ़ना
- canvas ड्रॉइंग सतह बनाता है
- width/height बिटमैप आकार
- id चयन की अनुमति देता है
- टैग के बीच टेक्स्ट फ़ॉलबैक
- केवल CSS खींचने से धुँधला हो सकता है
- SVG के विपरीत HTML में आकृति संतान नहीं
2D कॉन्टेक्स्ट से आयत खींचना
छोटी स्क्रिप्ट रंगती है। getContext("2d") 2D API देता है; fillRect आयत भरता है।
<canvas id="c" width="300" height="150">
Canvas drawing is not available in this browser.
</canvas>
<script>
const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#248";
ctx.fillRect(20, 20, 120, 80);
</script>
ड्रॉ कॉल पढ़ना
- getElementById canvas ढूँढता है
- getContext("2d") API खोलता है
- fillStyle रंग सेट करता है
- fillRect आयत भरता है
- बिना स्क्रिप्ट केवल फ़ॉलबैक
- अगला: web storage
canvas बनाम SVG चुनना
- स्थिर तेज़ लोगो: SVG
- अक्सर अपडेट पिक्सेल: canvas
- DOM आकृतियाँ: अक्सर SVG
- पिक्सेल क्षेत्र रंगना: canvas
- सरल बैज: अक्सर SVG
- WebGL/गेम: इस परिचय से परे
अभ्यास — पेज पर canvas
- शेल चिपकाएँ।
- स्क्रिप्ट जोड़ें; आयत जाँचें।
- रंग/संख्या बदलें।
- अस्थायी रूप से स्क्रिप्ट हटाएँ।
- केवल CSS से खींचें — धुँधलापन संभव।
- वाक्य: canvas JS बिटमैप है; SVG वेक्टर मार्कअप।
- आगे: web storage।
आसान गलतियाँ
- केवल HTML से आकृतियाँ उम्मीद
- फ़ॉलबैक टेक्स्ट भूलना
- लोगो के लिए canvas जब SVG बेहतर
- canvas को SVG से मिलाना
- केवल CSS आकार बदलना
- परिचय को पूरा Canvas कोर्स मानना
- अर्थ होने पर canvas बिना नाम छोड़ना
सारांश
- canvas खाली बिटमैप सतह है
- JavaScript getContext("2d") और fillRect से खींचता है
- आइकन के लिए SVG; गतिशील पिक्सेल के लिए canvas
- फ़ॉलबैक टेक्स्ट मदद करता है
- SVG वेक्टर था; यहाँ स्क्रिप्ट पिक्सेल
- अगला: HTML web storage
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी