HTML DOM Canvas ऑब्जेक्ट

HTML DOM Canvas ऑब्जेक्ट HTML5 में पेश किए गए <canvas> एलिमेंट से जुड़ा होता है। <canvas> टैग का उपयोग JavaScript की मदद से ग्राफिक्स ड्रॉ करने के लिए किया जाता है। कैनवास ग्राफिक्स के लिए एक कंटेनर के रूप में कार्य करता है। कैनवास पर हम लाइन्स, शेप्स आदि ड्रॉ कर सकते हैं।

प्रॉपर्टीज (Properties)

Canvas ऑब्जेक्ट के लिए निम्नलिखित प्रॉपर्टीज हैं:

मेथड्स (Methods)

Canvas ऑब्जेक्ट के निम्नलिखित मेथड्स हैं:

सिंटैक्स (Syntax)

Canvas ऑब्जेक्ट बनाने का सिंटैक्स:

var x = document.createElement("CANVAS");

उदाहरण (Example)

HTML DOM Canvas ऑब्जेक्ट का एक उदाहरण:

<!DOCTYPE html> <html> <head> <style> canvas { border: 1px double blue; margin: 1em; } </style> </head> <body> <h1>CANVAS</h1> <button onclick="createCanvas()">CREATE</button> <p>हरे गोले के साथ एक CANVAS एलिमेंट बनाने के लिए ऊपर दिए गए बटन पर क्लिक करें</p> <script> function createCanvas() { var x = document.createElement("CANVAS"); var ctx = x.getContext("2d"); ctx.fillStyle = "#C7EA46"; ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI); ctx.fill(); ctx.stroke(); document.body.appendChild(x); } </script> </body> </html>

आउटपुट (Output)

इससे निम्नलिखित आउटपुट प्राप्त होगा:

CREATE पर क्लिक करने पर:

उपरोक्त उदाहरण में:

हमने पहले एक CREATE बटन बनाया, जिसे क्लिक करने पर createCanvas() मेथड एक्जीक्यूट होता है:

<button onclick="createCanvas()">CREATE</button>

createCanvas() मेथड एक <canvas> एलिमेंट बनाता है। फिर हम नए बने <canvas> एलिमेंट के लिए getContext() मेथड का उपयोग करके कॉन्टेक्स्ट प्राप्त करते हैं। प्रत्येक कैनवास मेथड का केवल एक कॉन्टेक्स्ट हो सकता है। getContext() मेथड के अंदर पैरामीटर वैल्यू "2d" यह निर्दिष्ट करता है कि इसका उपयोग केवल शेप्स, साइज़ आदि ड्रॉ करने के लिए किया जाएगा (यानी केवल 2d स्टफ)। फिर हम fillStyle का उपयोग करके फिल कलर सेट करते हैं और पथ शुरू करने के लिए beginPath() मेथड का उपयोग करते हैं।

उसके बाद, सर्कल के कोऑर्डिनेट्स को परिभाषित करने के लिए arc() मेथड का उपयोग करते हैं और उस सर्कल को fillStyle कलर से भरते हैं। अंत में हम कैनवास पर वास्तव में ड्रॉ करने के लिए stroke() मेथड का उपयोग करते हैं और document.body के appendChild() मेथड का उपयोग करके कैनवास को बॉडी एलिमेंट के चाइल्ड के रूप में जोड़ते हैं:

function createCanvas() { var x = document.createElement("CANVAS"); var ctx = x.getContext("2d"); ctx.fillStyle = "#C7EA46"; ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI); ctx.fill(); ctx.stroke(); document.body.appendChild(x); }