HTML Canvas Graphics

HTML कैनवस ग्राफ़िक्स सीखें

HTML कैनवस ग्राफ़िक्स

HTML <कैनवास> तत्व का उपयोग वेब पेज पर ग्राफिक्स बनाने के लिए किया जाता है।

कैनवास का उदाहरण

उपरोक्त ग्राफ़िक्स <कैनवस> के साथ बनाए गए हैं। यह चार तत्वों को दर्शाता है: एक लाल आयत, एक ढाल आयत, एक बहुरंगी आयत और बहुरंगी पाठ।

कैनवास क्या है?

HTML <कैनवास> तत्व का उपयोग जावास्क्रिप्ट के साथ तुरंत ग्राफिक्स बनाने के लिए किया जाता है।

🎨महत्वपूर्ण नोट:

<कैनवस> तत्व ग्राफिक्स के लिए सिर्फ एक कंटेनर है। वास्तव में ग्राफ़िक्स बनाने के लिए आपको जावास्क्रिप्ट का उपयोग करना होगा।

पथ बनाएं

कैनवास पर पथ, बक्से, वृत्त बनाने के कई तरीके हैं

लेख जोड़ें

कैनवास पर टेक्स्ट को ड्रा और फॉर्मेट कर सकते हैं

छवियों को कैनवास में जोड़ा और आकार बदला जा सकता है

ढ़ाल

रैखिक और वृत्ताकार ग्रेडिएंट बनाए जा सकते हैं

🌐ब्राउज़र समर्थन:

कैनवस सभी प्रमुख ब्राउज़रों द्वारा समर्थित है।

कैनवास के उदाहरण

कैनवास HTML पेज का एक आयताकार भाग होता है। डिफ़ॉल्ट रूप से, कैनवास में कोई सीमा नहीं होती और न ही कोई सामग्री होती है।

मार्कअप इस तरह दिखता है:

<canvas id="myCanvas" width="200" height="100"></canvas>
नोट:जब एक आईडी विशेषता निर्दिष्ट करें (स्क्रिप्ट में निर्दिष्ट की जाए), और कैनवास के आकार को परिभाषित करने के लिए चौड़ाई और ऊंचाई विशेषताएँ निर्दिष्ट करें। बॉर्डर जोड़ने के लिए, स्टाइल विशेषता का उपयोग करें।

उदाहरण

एक बुनियादी, रिक्त कैनवास का उदाहरण:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

जावास्क्रिप्ट जोड़ें

आयताकार कैनवास भाग बनाने के बाद, आपको ड्राइंग के लिए जावास्क्रिप्ट जोड़ना होगा।

⚙️कदम:

  1. कैनवास तत्व प्राप्त करें: document.getElementById()
  2. प्रारूपण संदर्भ प्राप्त करें: getContext('2d')
  3. ड्राफ्ट विधियों का प्रयोग करें

एक रेखा खींचो

उदाहरण

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.moveTo(0, 0);
  ctx.lineTo(200, 100);
  ctx.stroke();
</script>

एक वृत्त बनाएं

उदाहरण

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(95, 50, 40, 0, 2 * Math.PI);
  ctx.stroke();
</script>

पाठ को ड्रा करें

उदाहरण

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.font = "30px Arial";
  ctx.fillText("Hello World", 10, 50);
</script>

स्ट्रोक पाठ

उदाहरण

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.font = "30px Arial";
  ctx.strokeText("Hello World", 10, 50);
</script>

fillText() vs strokeText()

  • fillText():पाठ भरें (ठोस रंग)
  • strokeText():पाठ की रूपरेखा तैयार करता है
  • fillText():आप fillStyle से रंग सेट कर सकते हैं
  • strokeText():आप स्ट्रोक स्टाइल से रंग सेट कर सकते हैं

एक रेखीय ढाल बनाएं

उदाहरण

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");

// ग्रेडिएंट बनाएं
  var grd = ctx.createLinearGradient(0, 0, 200, 0);
  grd.addColorStop(0, "red");
  grd.addColorStop(1, "white");

// ग्रेडिएंट भरें
  ctx.fillStyle = grd;
  ctx.fillRect(10, 10, 150, 80);
</script>

एक गोलाकार ढाल बनाएं

उदाहरण

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");

// ग्रेडिएंट बनाएं
  var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
  grd.addColorStop(0, "red");
  grd.addColorStop(1, "white");

// ग्रेडिएंट भरें
  ctx.fillStyle = grd;
  ctx.fillRect(10, 10, 150, 80);
</script>

चित्र बनाएं

उदाहरण

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 10, 10);
</script>

HTML कैनवास ट्यूटोरियल

<कैनवास> के बारे में अधिक जानने के लिए, हमारे HTML कैनवास ट्यूटोरियल पर जाएँ।

कैनवास के तरीके

  • fillRect() - आयत भरें
  • स्ट्रोकरेक्ट() - आयत रूपरेखा
  • ClearRect() - आयत साफ़ करें
  • beginPath() - एक नया पथ शुरू करें
  • क्लोज़पाथ() - पथ बंद करें

कैनवास गुण

  • fillStyle - रंग भरें
  • स्ट्रोकस्टाइल - स्ट्रोक का रंग
  • लाइनविड्थ - लाइन की चौड़ाई
  • फ़ॉन्ट - टेक्स्ट फ़ॉन्ट
  • textAlign - पाठ संरेखण

💡कैनवास अभ्यास

आप जो कुछ भी आज़माना चाहते हैं उसे नीचे कैनवास पर बनाएं: