Canvas API

<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> एलीमेंट अपने आप ड्राइंग की क्षमता नहीं है।

आपको जनरलेशन के लिए जनरलेशन करना होगा।

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);

अपने आप प्रयास करें

पथ

कैनवस पर ड्राइंग के लिए सामान्य तरीका है:

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();

अपने आप प्रयास करें