HTML <canvas> टैग

परिभाषा और उपयोग

<canvas> टैग आमतौर पर श्रित्र (आमतौर पर जेसक्रिप्ट) के द्वारा वास्तविक रूप से ग्राफिक चित्रित किया जाता है。

<canvas> टैग पारदर्शी है, यह केवल ग्राफिक का कंटेनर है, ग्राफिक को वास्तव में चित्रित करने के लिए श्रित्र का उपयोग करना आवश्यक है。

जिसमें JavaScript निष्क्रिय किया गया है और इसके साथ नहीं समर्थित <canvas> ब्राउज़र में, यह प्रदर्शित होगा <canvas> एलीमेंट के अंदर का कोई भी लेख

सुझाव

HTML Canvas ट्यूटोरियल में <canvas> एलीमेंट के बारे में अधिक जानकारी

सभी गुणों और विधियों के पूर्ण संदर्भ के लिए हमारे HTML कैनवस रेफरेंस मैनुअल।

उदाहरण

उदाहरण 1

एक लाल चतुर्भुज को वास्तविक समय में ड्राइंग करें और इसे <canvas> एलीमेंट में प्रदर्शित करें:

<canvas id="myCanvas">
आपका ब्राउज़र canvas टैग को समर्थित नहीं करता है。
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

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

उदाहरण 2

एक और <canvas> उदाहरण:

<canvas id="myCanvas">
आपका ब्राउज़र canvas टैग को समर्थित नहीं करता है。
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// पारदर्शिता खोलें
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

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

गुण

गुण मूल्य वर्णन
height पिक्सल मूल्य कैनवस की ऊंचाई निर्धारित करता है। डिफ़ॉल्ट मूल्य 150 है।
width पिक्सल मूल्य कैनवस की चौड़ाई निर्धारित करता है। डिफ़ॉल्ट मूल्य 300 है।

वैश्विक गुण

<canvas> टैग इसके साथ समर्थित है HTML में वैश्विक गुण।

इवेंट प्रतियोगिता

<canvas> टैग इसके साथ समर्थित है HTML में इवेंट प्रतियोगिता।

डिफ़ॉल्ट CSS सेटिंग

अधिकांश ब्राउज़र निम्नलिखित डिफ़ॉल्ट मूल्यों को प्रदर्शित करेंगे <canvas> एलीमेंट:

canvas {
  height: 150px;
  width: 300px;
}

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

<canvas> का इतिहास

यह HTML एलीमेंट क्लायंट वेक्टर ग्राफिक्स के लिए डिजाइन किया गया है। यह खुद कोई व्यवहार नहीं करता है, लेकिन एक ड्राइंग API को क्लायंट जेसक्रिप्ट को प्रदर्शित करता है ताकि स्क्रिप्ट चित्रण करना चाहते वाले सब कुछ एक कैनवस पर चित्रित कर सके।

<canvas> टैग को एप्पल ने सैफारी 1.3 वेब ब्राउज़र में शुरू किया था। एचटीएमएल के इस मूल विस्तार का कारण, सैफारी में एचटीएमएल के चित्रण क्षमता, जो मैक ओएस एक्स डेस्कटॉप के डैशबोर्ड कंपोनेंट द्वारा उपयोग किया जाता है, और एप्पल को डैशबोर्ड में स्क्रिप्टिंग ग्राफिक के समर्थन का एक तरीका होना चाहिए था।

फायरफॉक्स 1.5 और ऑपेरा 9 सैफारी के नेतृत्व का अनुसरण करते हैं। इन दोनों ब्राउज़रों को <canvas> टैग समर्थित करते हैं।

हम आइई में <canvas> टैग का उपयोग कर सकते हैं, और आइई के VML समर्थन के आधार पर खुले स्रोत जेसकैप कोड (गूगल द्वारा प्रारंभ किया गया) का उपयोग करके संगतता के लिए कैनवस का निर्माण कर सकते हैं। देखें:http://excanvas.sourceforge.net/।

<canvas> के मानकीकरण के प्रयास एक वेब ब्राउज़र निर्माता के अनौपचारिक संघ के द्वारा आगे बढ़ाए जा रहे हैं, अब <canvas> एचटीएमएल 5 ड्राफ़ट में एक औपचारिक टैग बन गया है। देखें:http://www.whatwg.org/specs/web-apps/current-work/

<canvas> टैग और SVG और VML के बीच के अंतर

<canvas> टैग और SVG और VML के बीच एक महत्वपूर्ण अंतर है, <canvas> को एक जेसकैप आधारित ड्राइंग एपीआई है, जबकि SVG और VML एक एक्सएमएल दस्तावेज़ का उपयोग करते हैं ड्राइंग को वर्णित करने के लिए।

ये दोनों तरीके कार्यात्मक रूप से समान हैं, किसी भी एक को दूसरे के स्थान पर सिमुलेट किया जा सकता है। सदैव कोई अलग अलग लगते हैं, लेकिन, हर एक के कार्यक्षमता और कमजोरी है। उदाहरण के लिए, SVG ड्राइंग को आसानी से संपादित किया जा सकता है, जहां तक उसके वर्णन से एलीमेंट को हटाया जाता है।

एक ही ग्राफिक के एक <canvas> टैग से एलीमेंट को हटाने के लिए, अक्सर ड्राइंग को हटाने और फिर उसे ड्राइंग करने की आवश्यकता होती है।

कैनवस टैग के द्वारा कैसे चित्रण किया जाता है

अधिकांश कैनवस ड्राइंग एपीआई <canvas> एलीमेंट पर परिभाषित नहीं है, बल्कि उसके द्वारा चित्रण के लिए परिभाषित है। getContext() तरीकाएक 'ड्राइंग एनवायरनमेंट' वस्तु पर प्राप्त किया जाता है।

कैनवस एपीआई भी पथ की प्रस्तुतीकरण विधि का उपयोग करता है। लेकिन, पथ एक श्रृंखला के तरीकों के आह्वानों से परिभाषित होता है, न कि अक्षरों और संख्याओं के द्वारा वर्णित इनपुट वाक्य, जैसे कि beginPath() और arc() तरीके का आह्वान करना।

जब एक पथ निर्धारित हो जाता है, तो fill() जैसे अन्य विधियां इस पथ पर कार्य करती हैं।ड्राइंग इनवायरन्मेंट के विभिन्न गुण, जैसे fillStyle, इन कार्यों को कैसे उपयोग करने का बताते हैं।

टिप्पणी:Canvas API को बहुत कमीशन करने का एक कारण यह है कि यह ड्राइंग टेक्स्ट को समर्थित नहीं करता है।एक <canvas> ग्राफिक में टेक्स्ट जोड़ने के लिए, या तो इसे स्वयं ड्राइंग करके और इसे बिटमैप इमेज के साथ मिलाना होगा, या <canvas> के ऊपर एक CSS स्थानांतरण का उपयोग करके HTML टेक्स्ट को ओवरले करना होगा。

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

तालिका में वाले नंबरों ने पहली बार इस एलीमेंट को समर्थन करने वाले ब्राउज़र का संस्करण निर्दिष्ट किया है。

च्रोम एज फायरफॉक्स सफारी ओपेरा
च्रोम एज फायरफॉक्स सफारी ओपेरा
4.0 9.0 2.0 3.1 9.0