JavaScript Academy · पाठ

Canvas संदर्भ सेट करना

2D रेंडरिंग संदर्भ प्राप्त करके कॉन्फ़िगर कीजिए।

पाठ 1, कुल 4 में से13 चरण

Canvas संदर्भ सेट करना, CoddyKit पर JavaScript Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह JavaScript Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Canvas API क्या है

Canvas API आपको JavaScript की सहायता से <canvas> एलिमेंट पर 2D ग्राफ़िक्स बनाने देता है। आपको पिक्सेल से बनी चित्रण-सतह और आकृतियों, छवियों तथा पाठ को चित्रित करने के लिए आदेशों का एक समूह मिलता है।

मार्कअप में केवल एक <canvas> टैग होता है।
सारा चित्रण JavaScript में एक context ऑब्जेक्ट के माध्यम से होता है।

<canvas id="board" width="320" height="200"></canvas>

Context प्राप्त करना

Canvas एलिमेंट पर getContext('2d') कॉल करके CanvasRenderingContext2D प्राप्त करें। हर चित्रण आदेश इसी ऑब्जेक्ट के माध्यम से जाता है।

const canvas = document.getElementById("board");
const ctx = canvas.getContext("2d");
console.log(ctx.constructor.name); // CanvasRenderingContext2D

निर्देशांक प्रणाली

मूल बिंदु (0, 0) ऊपरी-बाएँ कोने में होता है। X दाईं ओर बढ़ता है और Y नीचे की ओर। 320x200 Canvas का निचला-दायाँ कोना (320, 200) पर होता है।

चौड़ाई और ऊँचाई की विशेषताएँ

width और height HTML विशेषताएँ पिक्सेल में चित्रण बफ़र का आकार निर्धारित करती हैं। यदि इन्हें न दिया जाए, तो डिफ़ॉल्ट आकार 300x150 होता है। इन्हें JS में सेट करने पर Canvas भी साफ़ हो जाता है।

const canvas = document.getElementById("board");
canvas.width = 400;
canvas.height = 300;
console.log(canvas.width, canvas.height); // 400 300

CSS आकार और बफ़र आकार की तुलना

CSS की width/height Canvas को स्क्रीन पर फैलाती हैं, लेकिन पिक्सेल बफ़र को NOT बदलतीं। यदि ये विशेषताओं से अलग हों, तो चित्र धुंधले या खिंचे हुए दिखाई देते हैं। स्पष्ट आउटपुट के लिए दोनों को समान रखें।

canvas.width = 400;  // buffer pixels
canvas.style.width = "400px"; // display size — match it

उच्च-DPI स्क्रीन संभालना

Retina डिस्प्ले पर devicePixelRatio अक्सर 2 होता है। बफ़र का आकार बढ़ाएँ और context का पैमाना घटाएँ, ताकि रेखाएँ स्पष्ट बनी रहें।

const dpr = window.devicePixelRatio || 1;
canvas.width = 400 * dpr;
canvas.height = 300 * dpr;
canvas.style.width = "400px";
canvas.style.height = "300px";
ctx.scale(dpr, dpr);

भराव और रेखांकन शैलियाँ सेट करना

चित्रण की स्थिति context में रहती है। fillStyle भराव का रंग और strokeStyle बाहरी रेखा का रंग निर्धारित करता है। इनमें कोई भी CSS रंग स्ट्रिंग दी जा सकती है।

ctx.fillStyle = "#3498db";
ctx.strokeStyle = "rgba(231, 76, 60, 0.8)";
ctx.lineWidth = 4;

आपका पहला चित्रण

Context तैयार होने पर आप तुरंत चित्र बना सकते हैं। fillRect(x, y, w, h) वर्तमान fillStyle का उपयोग करके भरा हुआ आयत बनाता है।

const ctx = document.getElementById("board").getContext("2d");
ctx.fillStyle = "tomato";
ctx.fillRect(20, 20, 150, 80);

Canvas साफ़ करना

clearRect(x, y, w, h) आयताकार क्षेत्र को मिटाकर उसे फिर से पारदर्शी कर देता है। हर एनीमेशन फ़्रेम की शुरुआत में पूरे बफ़र को साफ़ करना सामान्य पहला कदम है।

ctx.clearRect(0, 0, canvas.width, canvas.height);

स्थिति सहेजना और पुनर्स्थापित करना

save() वर्तमान शैली और रूपांतरण को एक स्टैक पर रखता है; restore() उसे वापस निकालता है। इससे अस्थायी बदलाव अलग-थलग रहते हैं।

ctx.save();
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 50, 50);
ctx.restore(); // fillStyle reverts to previous value

सुविधा की पहचान

बहुत पुराने browser से बचने के लिए इसका उपयोग करने से पहले जाँच लें कि getContext मौजूद है।

const canvas = document.getElementById("board");
if (canvas.getContext) {
  const ctx = canvas.getContext("2d");
  // safe to draw
} else {
  console.log("Canvas not supported");
}

त्वरित जाँच

Canvas की प्रारंभिक व्यवस्था के बारे में अपनी समझ जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: Canvas की प्रारंभिक व्यवस्था

आपने सीखा कि Canvas कैसे प्राप्त करें, getContext('2d') कॉल करें, ऊपरी-बाएँ मूल बिंदु को समझें, बफ़र और CSS आकार निर्धारित करें, devicePixelRatio के साथ उच्च-DPI संभालें और fillStyle/strokeStyle कॉन्फ़िगर करें। अगला विषय है आकृतियाँ और पथ बनाना।

शुरुआत निःशुल्क

एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 59
पाठ: 200

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Canvas संदर्भ सेट करना” पाठ निःशुल्क है?

हाँ — JavaScript Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Canvas संदर्भ सेट करना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Canvas संदर्भ सेट करना” में मैं क्या सीखूँगा?

2D रेंडरिंग संदर्भ प्राप्त करके कॉन्फ़िगर कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ JavaScript Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या JavaScript Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर JavaScript Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“Canvas संदर्भ सेट करना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस JavaScript Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर JavaScript Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← JavaScript Academy पर वापस जाएँ