HTML Academy · पाठ

Canvas पर टेक्स्ट और चित्र

Canvas पर टेक्स्ट स्ट्रिंग रेंडर करें और चित्र बनाएँ

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

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

पाठ बनाना

फ़ॉन्ट सेट करें: ctx.font = "bold 24px sans-serif"। बनाएँ: ctx.fillText("Hello", x, y) या ctx.strokeText("Hello", x, y)। y निर्देशांक पाठ की आधाररेखा होता है — किसी सीमाबद्ध बॉक्स के भीतर पाठ को सही ढंग से रखने के लिए उसके ऊपर आरोही ऊँचाई जोड़ें।

पाठ संरेखण

ctx.textAlign क्षैतिज संरेखण नियंत्रित करता है: "left" (डिफ़ॉल्ट), "center", "right"। ctx.textBaseline y के सापेक्ष ऊर्ध्वाधर संरेखण नियंत्रित करता है: "top", "middle", "alphabetic" (डिफ़ॉल्ट), "bottom"। पाठ को केंद्रित करने के लिए दोनों को क्रमशः "center" और "middle" पर सेट करें।

लेआउट के लिए measureText

ctx.measureText("text") चौड़ाई और फ़ॉन्ट मेट्रिक्स वाला TextMetrics ऑब्जेक्ट लौटाता है। पाठ की स्थितियों की गतिशील गणना के लिए इसका उपयोग करें — जैसे किसी बॉक्स में पाठ को केंद्रित करना, maxWidth पर पाठ को लपेटना या डेटा बिंदुओं के पास लेबल को दाईं ओर संरेखित करना।

पाठ लपेटना

कैनवास में अंतर्निहित पाठ लपेटने की सुविधा नहीं होती। इसे स्वयं लागू करें: शब्दों की चौड़ाई मापें, maxWidth से अधिक होने तक उन्हें जोड़ते जाएँ, फिर lineHeight अंतराल पर नई पंक्ति में जाएँ। कैनवास रेंडरिंग लाइब्रेरी में यह एक सामान्य उपयोगिता फ़ंक्शन है।

छवियाँ बनाना

ctx.drawImage(image, dx, dy) किसी HTMLImageElement, HTMLCanvasElement या HTMLVideoElement को (dx, dy) पर बनाता है। छवि को पहले लोड करें और ड्रॉ करने से पहले पिक्सेल उपलब्ध होने का आश्वासन देने के लिए उसे अपने onload हैंडलर में बनाएँ।

const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.src = "photo.jpg";

छवियों का स्केल करना

ctx.drawImage(image, dx, dy, dw, dh) छवि को dw x dh में फिट करने के लिए स्केल करता है। आस्पेक्ट अनुपात अपने-आप सुरक्षित नहीं रहता — आयामों की मैन्युअल गणना करें। आस्पेक्ट अनुपात सुरक्षित रखने के लिए: dw = img.width * scale; dh = img.height * scale।

छवियों को क्रॉप करना

नौ-आर्ग्युमेंट वाला drawImage: ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)। स्रोत आयत (sx, sy, sw, sh) छवि से भाग काटता है; गंतव्य आयत (dx, dy, dw, dh) उस कटे हुए भाग को कैनवास पर रखता और स्केल करता है।

छवि स्मूदिंग

ctx.imageSmoothingEnabled = false छवियों को स्केल करते समय द्विरेखीय इंटरपोलेशन बंद कर देता है। जहाँ स्पष्ट और बिना स्मूदिंग वाला स्केलिंग वांछित हो, वहाँ इसका उपयोग करें, जैसे पिक्सेल आर्ट में। फ़ोटोग्राफ़िक छवियों के लिए इसे सक्षम ही रहने दें (डिफ़ॉल्ट), क्योंकि उनमें स्मूद स्केलिंग बेहतर दिखती है।

छवि स्रोत के रूप में कैनवास

drawImage के स्रोत के रूप में एक कैनवास दें — यानी एक कैनवास को दूसरे पर रेंडर करें। इससे ऑफ़-स्क्रीन रेंडरिंग संभव होती है: जटिल कंपोज़िट को छिपे हुए कैनवास पर बनाएँ, फिर प्रत्येक फ़्रेम में उस कैनवास को एक ही ऑपरेशन में दिखाई देने वाले कैनवास पर बनाएँ।

globalAlpha और कंपोज़िटिंग

ctx.globalAlpha (0 से 1) इसके बाद होने वाली सभी ड्रॉइंग पर एकसमान पारदर्शिता लागू करता है। ctx.globalCompositeOperation यह नियंत्रित करता है कि नई ड्रॉइंग मौजूदा पिक्सेल के साथ कैसे मिले: "source-over" (डिफ़ॉल्ट), "multiply", "screen", "destination-out" (मिटाना) और अन्य।

निर्यात के लिए toDataURL

canvas.toDataURL("image/png") कैनवास को base64 PNG डेटा URL के रूप में निर्यात करता है। उपयोगकर्ता द्वारा शुरू किए गए डाउनलोड के लिए इसका उपयोग करें: एक एंकर बनाएँ, href को डेटा URL और download विशेषता को फ़ाइल नाम पर सेट करें, फिर प्रोग्राम के माध्यम से उस पर क्लिक करें।

ज्ञान जाँच

पाठ बनाते समय ctx.textBaseline = "middle" किस चीज़ को प्रभावित करता है?

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

सारांश

कैनवास का पाठ रेंडरिंग स्थिति निर्धारित करने के लिए ctx.font, fillText/strokeText, textAlign और textBaseline तथा लेआउट की गणना के लिए measureText का उपयोग करता है। drawImage के माध्यम से छवि बनाना स्केलिंग और क्रॉपिंग का समर्थन करता है; globalAlpha और globalCompositeOperation मिश्रण को नियंत्रित करते हैं। toDataURL कैनवास को डाउनलोड या आगे के उपयोग के लिए निर्यात करता है।

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

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

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

पाठ्यक्रम: 40
पाठ: 159

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

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

क्या “Canvas पर टेक्स्ट और चित्र” पाठ निःशुल्क है?

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

“Canvas पर टेक्स्ट और चित्र” में मैं क्या सीखूँगा?

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

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

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

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

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

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

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

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

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