Get started with HTML canvas

Jan 30, 2026
कैसे करना है

एचटीएमएल & lt; कैनवास और जीटी; तत्व वेब पर पिक्सेल-आधारित ग्राफिक्स बनाने के लिए एक शक्तिशाली समाधान है जावास्क्रिप्ट , और आपको कुछ अभ्यास के साथ कुछ उल्लेखनीय प्रभाव बनाने की अनुमति देंगे।

इस ट्यूटोरियल में, हम एक कैनवास ऑब्जेक्ट बनाने, उस पर सरल दृश्यों को चित्रित करने और उन दृश्यों को एनिमेट करने पर एक नज़र डालेंगे।

01. एक पृष्ठ बनाएँ [2 9]

कैनवास मूल रूप से एक HTML तत्व है जिसे आप पृष्ठ पर रखते हैं, जो आपके इच्छित क्षेत्र को कवर करने के लिए स्केल करते हैं और उसके बाद खींच सकते हैं। शुरू करने के लिए, हमें कैनवास ऑब्जेक्ट के साथ एक साधारण पृष्ठ बनाने की आवश्यकता है। 

 & lt;! डॉक्टाइप एचटीएमएल और जीटी;
& lt; html & gt;
  & lt; हेड और जीटी;
  & lt; मेटा Charset = 'UTF-8' / & gt;
  & lt; शीर्षक & gt; html कैनवास डेमो & lt; / शीर्षक & gt;
  & lt; लिंक rel = 'stylesheet' href = 'custom.css' / & gt;
  & lt; स्क्रिप्ट src = "canvas.js" & gt; & lt; / स्क्रिप्ट & gt;
  & lt; / सिर & gt;
  & lt; शरीर & gt;
  & lt; कैनवास आईडी = "एचटीएमएल-कैनवास" और जीटी;
  & lt; / शरीर & gt;
& lt; / html & gt;

02. कैनवास को स्केल करें [2 9]

हमें खेलने के लिए बहुत सी जगह देने के लिए, हम चाहते हैं कि हमारे कैनवास पूरी स्क्रीन भर जाएंगे। हम इसे एक काला पृष्ठभूमि भी देंगे ताकि आप जानते हों कि यह निश्चित रूप से वहां है। यह वास्तव में स्क्रॉल बार या सफेद स्थान के साथ समाप्त किए बिना थोड़ा मुश्किल हो सकता है। नीचे सीएसएस का ख्याल रखना चाहिए। 

 कैनवास {
  ऊंचाई: 100 वीएच;
  चौड़ाई: 100vw;
  स्थिति: पूर्ण;
  पृष्ठभूमि-रंग: # 000000;
}
  मार्जिन: 0;
  पैडिंग: 0;
}

03. उपयोग के लिए कैनवास शुरू करें [2 9]

इसके बाद हमें उपयोग करने के लिए तैयार कैनवास स्थापित करने के लिए कुछ जावास्क्रिप्ट जोड़ने की आवश्यकता है। यह सुनिश्चित करने के लिए कि स्क्रिप्ट कैनवास तत्व तैयार होने से पहले चलाने की कोशिश नहीं करता है, यह सुनिश्चित करने के लिए हम डोमकोटेंटलोडेड ईवेंट को हुक करेंगे। हमारे पास इस क्षेत्र से मेल खाने के लिए कैनवास रिज़ॉल्यूशन भी सेट करेगा - अन्यथा कैनवास रिज़ॉल्यूशन में वृद्धि के बिना स्केल करेगा, जिससे धुंधला या पिक्सेल्ड ग्राफिक्स होता है। 

 ​​Document.addeventListener ("DomcontentLoaded", फ़ंक्शन () {
  var canvas = document.getElementByID ("HTML-CANVAS");
  var mucalles = [];
  var त्रिज्या = 50;
  canvas.width = canvas.clientwidth;
  canvas.height = canvas.clientheight;
  var context = canvas.getcontext ("2 डी");
}, गलत);

04. एक आकृति बनाएं [2 9]

आप देखेंगे कि अंतिम चरण में, हमने 'संदर्भ' नामक कुछ को क्रेट किया। इस तरह कैनवास पर आरेखण होता है। एक पेंटब्रश के रूप में संदर्भ के बारे में सोचना सबसे आसान है जिसे हम विभिन्न लाइनों, आर्क और बुनियादी आकारों को आकर्षित करने के लिए उपयोग कर सकते हैं।

अब हम क्या कर सकते हैं, हमारे संदर्भ को एक ड्रैकर्कल फ़ंक्शन लिखकर उपयोग करने के लिए रखा गया है जो 360 डिग्री एआरसी बना देगा - यानी, एक सर्कल। हम एक चाप को परिभाषित करने और सीमा के लिए शैलियों को सेट करने और भरने के संदर्भ को संदर्भित करके यह करते हैं, फिर वास्तव में आकार खींचने के लिए भरने () और स्ट्रोक () कार्यों को बढ़ाएं (स्ट्रोक सीमा खींचता है)। 

 ​​फंक्शन ड्राक्रिक्ले (एक्स, वाई, त्रिज्या, सीमा, सीमा_कोर, fill_colour)
  {
  context.beginpath ();
  Context.arc (x, y, त्रिज्या, 0,2 * math.pi);
  context.strokestyle = border_colour;
  context.fillstyle = fill_colour;
  context.linewidth = सीमा;
  context.closepath ();
  context.fill ();
  context.stroke ();
  }

05. कई मंडलियां बनाएं [2 9]

महान। हमारे पास एक ऐसा कार्य है जो मंडलियों को आकर्षित कर सकता है। अब हमें आकर्षित करने के लिए कुछ चाहिए। आइए सर्कल ऑब्जेक्ट्स का वर्णन करने वाली सरणी बनाने के लिए चरण 3 से कोड का विस्तार करें। यह प्रत्येक सर्कल के एक्स और वाई समन्वय, रंग और एक दिशा मूल्य को स्टोर करेगा।

हम सीधे सर्कल को सीधे ड्राइंग करने के बजाय इस सरणी संरचना को बनाते हैं क्योंकि यह हमें बाद में सरणी की सामग्री को फिर से चित्रित करके मंडलियों को एनिमेट करने में सक्षम बनाता है। 

 ​​के लिए (var i = 0; i & lt; 20; I ++) {
  var x = त्रिज्या + (math.random () * (canvas.width - (2 * त्रिज्या)));
  var y = त्रिज्या + (math.random () * (canvas.height - (2 * त्रिज्या)));
  var रंग = randomcolour ();
  var दिशा = math.random () * 2.0 * math.pi;
  मंडल। पुश ({x: x, y: y, रंग: रंग, दिशा: दिशा});
  ड्रा (); }

06. रंग यादृच्छिक [2 9]

अंतिम चरण में, हमने कुछ नए कार्यों का उपयोग किया है जिन्हें अभी तक परिभाषित नहीं किया गया है। चलो यादृच्छिक रंग () के साथ शुरू करते हैं। यह एक उपयोगिता फ़ंक्शन होगा जो एक यादृच्छिक हेक्साडेसिमल स्ट्रिंग एक रंग का प्रतिनिधित्व करता है। यह लागू करने के लिए काफी सरल है। 

 ​​समारोह RandomColour () {
  var chars = '0123456789ABCEF';
  var रंग = '#';
  के लिए (var i = 0; i & lt; 6; i ++) {
  रंग + = चार्स [math.floor (math.random () * 16)];
  }
  वापसी रंग; }

07. पृष्ठ पर ग्राफिक्स ड्रा करें [2 9]

अब हम ड्रा () फ़ंक्शन को लागू करके चीजों को एक साथ लाने के लिए तैयार हैं। यह दो प्रमुख चीजें करेगा। सबसे पहले, यह clearrect () फ़ंक्शन का उपयोग कर कैनवास को साफ़ करेगा। यह महत्वपूर्ण होगा जब हम अपने मंडलियों को एनिमेट करने के लिए आते हैं, पुराने के शीर्ष पर नए फ्रेम को आकर्षित करने से बचने के लिए। इसके बाद यह हमारे द्वारा बनाए गए सरणी के माध्यम से पुनर्निर्मित होगा और हमारे ड्रेक्कल फ़ंक्शन का उपयोग करके उत्तराधिकार में कैनवास पर प्रत्येक सर्कल को आकर्षित करेगा। 

 ​​फंक्शन ड्रा () {
  संदर्भ। ClearRect (0, 0, canvas.width, canvas.height);
  circles.foreach (समारोह (वृत्त) {
  drawcircle (circle.x, circle.y, त्रिज्या, 5, circl.colour, circour.colour);
    }); }

08. आकार को एनिमेट करें [2 9]

यदि आप इसे आजमाएं, तो आप पृष्ठ पर चित्रित कुछ स्थिर सर्कल देखेंगे। लेकिन हम उन्हें एनिमेट करना चाहते हैं। ऐसा करने के लिए, हमें अपने ड्रॉ () फ़ंक्शन को कुछ तरीकों से विस्तारित करने की आवश्यकता है। सबसे पहले, हम सर्कल का उपयोग करेंगे। सर्कल के लिए एक्स और वाई स्थिति में परिवर्तनों की गणना करने के लिए हमने सरणी को धक्का दिया।

इसके बाद, हम रिक्वेस्टेशनफ्रेम नामक एक अंतर्निहित फ़ंक्शन का उपयोग करेंगे जो ड्रॉ () फ़ंक्शन को पुनर्स्थापित रूप से कॉल करता है। RequestAnimationFrame ब्राउज़र को फिर से फ़ंक्शन को कब कॉल करने की अनुमति देता है, अगली फ्रेम को कब खींचने के लिए गणना करने के लिए टाइमर को लागू करने की आवश्यकता से बचने के लिए। 

 ​​फ़ंक्शन ड्रा () {
  संदर्भ। ClearRect (0, 0, canvas.width, canvas.height);
  circles.foreach (समारोह (वृत्त) {
  circle.x = circle.x + math.cos (circle.direction);
  circle.y = circle.y + math.sin (circle.direction);
  drawcircle (circle.x, circle.y, त्रिज्या, 5, circl.colour, circour.colour);
  });
  RequestAnimationFrame (ड्रा);
  }

09. पृष्ठ के किनारे पर उछाल [2 9]

हालांकि, एक चीज अभी भी गायब है। मंडल अब स्क्रीन के किनारे से गायब हो जाते हैं। आइए उन्हें वापस उछाल दें। ऐसा करने के लिए, ड्रॉ () फ़ंक्शन के फॉरच लूप के भीतर, हम एक नए फ़ंक्शन, बाउंस (सर्कल) में कॉल करेंगे।

बाउंस फ़ंक्शन निर्धारित करेगा कि जब कोई सर्कल स्क्रीन के किनारे पर होता है, और उचित रूप से इसके दिशा मान को समायोजित करता है। 

 ​​फंक्शन बाउंस (सर्कल) {
  यदि (((circle.x - त्रिज्या) & lt; 0) || ((circle.y - त्रिज्या) & lt; 0) || ((circle.x + त्रिज्या) & gt; canvas.width) || ( वाई + त्रिज्या) & gt; canvas.height) {
  circle.direction + = (math.pi / 2);
  }
  यदि (circle.direction & gt; (2 * math.pi)) {
  circle.direction - = (2 * math.pi);
  }
}

[9 7] यह लेख मूल रूप से दिखाई दिया

[9 7] वेब डिजाइनर [9 7] अंक 266। [9 7] इसे यहां खरीदें।

संबंधित आलेख:

  • कैनवास का उपयोग करके एक डिजिटल एच्च एक स्केच बनाएं
  • नए नोड.जेएस 8 के बारे में आपको जो कुछ पता होना चाहिए
  • एचटीएमएल 5 में प्रभाव एनिमेशन के बाद कैसे निर्यात करें

कैसे करना है - सर्वाधिक लोकप्रिय लेख

Compositing in animation: Learn the basics

कैसे करना है Jan 30, 2026

(छवि क्रेडिट: ब्लैकमैजिक डिजाइन) [1 9] इस लेख मे..

Build terrain in Houdini 17

कैसे करना है Jan 30, 2026

हुदिनी 17 में, साइडएफएक्स ने कुछ नए उपकरण पेश किए औ�..

Concept design tips for artists

कैसे करना है Jan 30, 2026

2 का पृष्ठ 1: पृष्ठ 1 [1 1] पृष्ठ 1 [1 1] पृष्ठ 2 [1 9] [1 9]..

सिनेमा 4 डी में रेडशिफ्ट प्रॉक्सी कैसे बनाएं

कैसे करना है Jan 30, 2026

सिनेमा 4 डी कई चीजों पर बहुत अच्छा है, लेकिन यह..

स्क्रैच से एक ईकॉमर्स साइट बनाएं

कैसे करना है Jan 30, 2026

हाल के वर्षों में ईकॉमर्स इतना लोकप्रिय हो गया है..

वॉटरकलर में मास्टर नकारात्मक पेंटिंग

कैसे करना है Jan 30, 2026

नकारात्मक पेंटिंग पेंटिंग को संदर्भित करता है नकारात्मक अंतरिक्ष ..

क्लिप स्टूडियो पेंट में कस्टम ब्रश बनाएं

कैसे करना है Jan 30, 2026

क्लिप स्टूडियो पेंट की हर पहली बार स्थापना में सजावट subtool की एक उत्साहित अ�..

Create a pouring water effect in RealFlow

कैसे करना है Jan 30, 2026

यह ट्यूटोरियल आपको दिखाता है कि तरल डालने वाले प्..

श्रेणियाँ