HTML DOM कैनवस ऑब्जेक्ट

<canvas> एलीमेंट HTML पृष्ठ में बिटमैप क्षेत्र को परिभाषित करता है。

Canvas API JavaScript को चित्र को चित्रशाला पर चित्रित करने की अनुमति देता है。

Canvas API आकृति, रेखाएँ, वक्र, फ़ॉन्ट, टेक्स्ट और इमेज, रंग, घुमाव, पारदर्शिता और अन्य पिक्सल ऑपरेशन को दूरबीन कर सकता है。

Canvas को HTML में जोड़ें

आप <canvas> टैग का उपयोग करके HTML पृष्ठ में किसी भी स्थान पर canvas एलीमेंट जोड़ सकते हैं:

उदाहरण

<canvas id="myCanvas" width="300" height="150"></canvas>

स्वयं प्रयोग करें

कैसे Canvas एलीमेंट एक्सेस करें

आप HTML DOM विधि getElementById() का उपयोग करके <canvas> एलीमेंट एक्सेस कर सकते हैं:

const myCanvas = document.getElementById("myCanvas");

कैनवस पर चित्र करने के लिए, आपको 2D कंटेक्स्ट ऑब्जेक्ट को बनाना होगा

const ctx = myCanvas.getContext("2d");

नोट

HTML <canvas> एलीमेंट स्वयं ड्राइंग की क्षमता नहीं रखता

आपको किसी भी ग्राफिक्स को ड्राइंग करने के लिए JavaScript का उपयोग करना होगा

getContext() विधि एक ड्राइंग टूल (विधि) वाले ऑब्जेक्ट को वापस करती है

कैनवस पर चित्र करना

2D कंटेक्स्ट ऑब्जेक्ट को बनाने के बाद, आप कैनवस पर चित्र कर सकते हैं।

नीचे दिए गए fillRect() विधि ने काले चतुर्भुज को दूर किया है, जिसका ऊपरी दक्षिणी कोना 20,20 स्थित है। इस चतुर्भुज की चौड़ाई 150 पिक्सल है और ऊंचाई 100 पिक्सल है

उदाहरण

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

स्वयं प्रयोग करें

रंग का उपयोग करके

fillStyle गुण से ड्राइंग ऑब्जेक्ट का फिल का रंग सेट करें

उदाहरण

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

स्वयं प्रयोग करें

आप इसके साथ document.createElement() विधि का उपयोग करके एक नया <canvas> एलीमेंट बना सकते हैं और इसे मौजूदा HTML पृष्ठ में जोड़ सकते हैं:

उदाहरण

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

स्वयं प्रयोग करें

clearRect()

कैनवस पर चित्र करने के लिए आम तरीका है:

1. रास्ता शुरू करें - beginPath()
2. एक बिन्दु पर जाएं - moveTo()
3. रास्ते में दूर करें - lineTo()
4. रास्ता दूर करें - stroke()

उदाहरण

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

स्वयं प्रयोग करें