Get started with HTML canvas

Sep 13, 2025
कैसे करना है

एचटीएमएल & 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 में प्रभाव एनिमेशन के बाद कैसे निर्यात करें

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

How to select with Photoshop's Lasso tools

कैसे करना है Sep 13, 2025

चयन सबसे महत्वपूर्ण कार्यों में से एक हैं जो आप में मास्टर करना सीखेंगे ..

Paint rippling water in oils

कैसे करना है Sep 13, 2025

जब आप इसमें किसी चीज के साथ पेंटिंग करते हैं, तो आप बाधित प्रतिबिंब को चित�..

Create stunning landscapes in Houdini

कैसे करना है Sep 13, 2025

एक नोड-आधारित, प्रक्रियात्मक दृष्टिकोण का उपयोग �..

अपने स्वयं के कैनवास बोर्ड कैसे बनाएं

कैसे करना है Sep 13, 2025

अपने स्वयं के कैनवास बोर्ड बनाना मजेदार, त्वरित ह..

एक कुत्ते का एक पेंसिल चित्र बनाएं

कैसे करना है Sep 13, 2025

पालतू चित्रों को चित्रित करते समय, आपको सिर्फ जान..

Build a custom Maya interface

कैसे करना है Sep 13, 2025

आधुनिक सॉफ्टवेयर बेहद शक्तिशाली और सर्वव्यापी हो सकता है। माया कोई अलग �..

Make a composite in Photoshop

कैसे करना है Sep 13, 2025

एडोब आज वीडियो ट्यूटोरियल की एक नई श्रृंखला लॉन्च कर रहा है जिसे इसे अब ब�..

Create quality digital copies of your art

कैसे करना है Sep 13, 2025

कला सिर्फ बनाने के बारे में नहीं है, यह साझा करने के बारे में भी है। एक बार �..

श्रेणियाँ