Jassif Team Institution

HTML Canvas Reference

<कैनवस> तत्व HTML पृष्ठ के बिटमैप भाग को परिभाषित करता है।

कैनवास एपीआई जावास्क्रिप्ट को कैनवास पर ग्राफिक्स बनाने की अनुमति देता है।

कैनवास एपीआई रंग, घुमाव, पारदर्शिता और अन्य पिक्सेल जोड़तोड़ के साथ आकार, रेखाएं, वक्र, बक्से, पाठ और छवियां बना सकता है।

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

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

आप HTML DOM विधि getElementById() से <canvas> तत्व तक पहुंच सकते हैं।

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

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

Drawing on the Canvas

2डी वातावरण बनाने के बाद, आप कैनवास पर चित्र बना सकते हैं।

fillRect() विधि 20,20 की स्थिति पर ऊपरी-बाएँ कोने के साथ एक काला आयत बनाती है। आयत 150 पिक्सेल चौड़ा और 100 पिक्सेल ऊँचा है।

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

ctx.fillRect(20, 20, 150, 100);

Using Colors

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

Paths

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

आरंभ पथ - आरंभ पथ()
एक बिंदु पर जाएँ - moveTo()
पथ पर आरेखित करें - लाइनटू()
पथ बनाएं - आघात()

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

Complete Canvas API Reference

यह नोट कैनवास पर पाठ, रेखाएं, बक्से, मंडलियां, छवियां और बहुत कुछ खींचने के लिए उपयोग किए जाने वाले getContext ("2d") ऑब्जेक्ट के सभी गुणों और विधियों को शामिल करता है।

Drawing Methods

कैनवास पर सीधे चित्र बनाने के केवल 3 तरीके हैं:

Path Methods

Circles and Curves

Text

Colors, Styles, and Shadows

Transformations

Image Drawing

The ImageData Object / Pixel Manipulation

Compositing

Other Methods

Standard Properties and Events

कैनवास ऑब्जेक्ट स्थिर गुणों और घटनाओं का भी समर्थन करता है।

Related Pages

Canvas tutorial: Canvas Tutorial

HTML tutorial: HTML5 Canvas

HTML reference: HTML <canvas> tag

Browser Support

<कैनवास> तत्व एक HTML5 मानक (2014) है।

कैनवस एपीआई सभी आधुनिक ब्राउज़रों में समर्थित है:

Exercises