कैनवास एलिमेंट
| HTML |
|---|
| Comparisons |
कैनवास तत्व एचटीएमएल5 का भाग है और आकार और बिटमैप छवियों के गतिशील, स्क्रिप्टिंग भाषा प्रतिपादन (कंप्यूटर ग्राफिक्स) की अनुमति देता है। यह निम्न स्तरीय, प्रक्रियात्मक मॉडल है जो बिटमैप को अद्यतन करता है। एचटीएमएल5 कैनवस वीडियो गेम ग्राफ़िक्स बनाने में भी सहायता करता है।
जबकि एचटीएमएल5 कैनवास अपनी स्वयं की 2डी ड्राइंग एपीआई प्रदान करता है, यह ओपनजीएल ईएस के साथ 3डी रेंडरिंग की अनुमति देने के लिए वेबजीएल एपीआई का भी समर्थन करता है।
एमएल5 कैनवास अपनी स्वयं की 2डी ड्राइंग
इतिहास
कैनवस को प्रारंभ में 2004 में अपने स्वयं के मैक ओएस एक्स वेबकिट घटक में उपयोग के लिए ऐप्पल इंक द्वारा प्रस्तुत किया गया था,[1] डैशबोर्ड (मैक ओएस) विजेट टूलकिट और सफारी (वेब ब्राउज़र) ब्राउज़र जैसे अनुप्रयोगों को सशक्त बनाना होता है। इसके पश्चात्, 2005 में, इसे गेको (सॉफ़्टवेयर) ब्राउज़र के संस्करण 1.8 में अपनाया गया था,[2] और 2006 में ओपेरा (वेब ब्राउज़र),[3] और अगली पीढ़ी की वेब प्रौद्योगिकियों के लिए नई प्रस्तावित विशिष्टताओं पर वेब हाइपरटेक्स्ट एप्लीकेशन टेक्नोलॉजी वर्किंग ग्रुप (डब्ल्यूएचएटीडब्ल्यूजी) द्वारा मानकीकृत किया गया है।
उपयोग
ए canvas ऊंचाई और चौड़ाई विशेषताओं के साथ एचटीएमएल कोड में परिभाषित खींचने योग्य क्षेत्र सम्मिलित है। जावास्क्रिप्ट कोड अन्य सामान्य 2डी एपीआई के समान ड्राइंग कार्यों के पूरे सेट के माध्यम से क्षेत्र तक पहुंच सकता है, इस प्रकार गतिशील रूप से उत्पन्न ग्राफिक्स की अनुमति देता है। कैनवास के कुछ प्रत्याशित उपयोगों में ग्राफ़ बनाना, एनिमेशन, गेम और छवि संरचना सम्मिलित हैं।
कैनवास के साथ इंटरैक्ट करने में कैनवास के रेंडरिंग संदर्भ को प्राप्त करना सम्मिलित है, जो यह निर्धारित करता है कि कैनवास एपीआई, वेबजीएल, या वेबजीएल2 रेंडरिंग (कंप्यूटर ग्राफिक्स) संदर्भ का उपयोग करना है।
उदाहरण
निम्नलिखित कोड एचटीएमएल पृष्ठ में कैनवास तत्व बनाता है:
<canvas id="example" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
जावास्क्रिप्ट का उपयोग करके, आप कैनवास पर चित्र बना सकते हैं:
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);
यह कोड स्क्रीन पर लाल आयत बनाता है।
कैनवस एपीआई save() और restore() भी प्रदान करता है , कैनवास संदर्भ की सभी विशेषताओं को सहेजने और पुनर्स्थापित करने के लिए उपयोग की जाती है।
कैनवास तत्व का आकार बनाम ड्राइंग सतह का आकार
एक कैनवास के वास्तव में दो आकार होते हैं: तत्व का आकार और तत्व की ड्राइंग सतह का आकार तत्व की चौड़ाई और ऊंचाई विशेषताएँ सेट करने से ये दोनों आकार निर्धारित होते हैं; सीएसएस विशेषताएँ केवल तत्व के आकार को प्रभावित करती हैं।
डिफ़ॉल्ट रूप से, कैनवास तत्व का आकार और उसकी ड्राइंग सतह का आकार दोनों 300 स्क्रीन पिक्सल चौड़ा और 150 स्क्रीन पिक्सल ऊंचा है। उदाहरण में दिखाई गई सूची में, जो कैनवास तत्व के आकार को सेट करने के लिए सीएसएस का उपयोग करता है, तत्व का आकार 600 पिक्सेल चौड़ा और 300 पिक्सेल ऊंचा है, किन्तु ड्राइंग सतह का आकार 300 पिक्सेल × 150 के डिफ़ॉल्ट मान पर अपरिवर्तित रहता है पिक्सल जब किसी कैनवास तत्व का आकार उसकी ड्राइंग सतह के आकार से मेल नहीं खाता है, जिससे ब्राउज़र तत्व को फिट करने के लिए ड्राइंग सतह को मापता है (जिसके परिणामस्वरूप आश्चर्यजनक और अवांछित प्रभाव हो सकते हैं)।
तत्व का आकार निर्धारित करने और सतह के आकार को विभिन्न मानों पर चित्रित करने का उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Canvas element size: 600 x 300,
Canvas drawing surface size: 300 x 150</title>
<style>
body {
background: #dddddd;
}
#canvas {
margin: 20px;
padding: 20px;
background: #ffffff;
border: thin inset #aaaaaa;
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<canvas id="canvas">
Canvas not supported
</canvas>
</body>
</html>
कैनवास बनाम स्केलेबल वेक्टर ग्राफ़िक्स (एसवीजी)
स्केलेबल वेक्टर ग्राफिक्स ब्राउज़र में आकृतियाँ बनाने का वैकल्पिक विधि है।[4] कैनवास के विपरीत, जो रैस्टर ग्राफ़िक्स-आधारित है, एसवीजी वेक्टर ग्राफ़िक्स-आधारित है, जिससे प्रत्येक खींची गई आकृति को दृश्य ग्राफ या दस्तावेज़ ऑब्जेक्ट मॉडल में ऑब्जेक्ट के रूप में याद किया जा सकता है, जिसे बाद में बिटमैप में प्रस्तुत किया जाता है। इसका कारण यह है कि यदि किसी एसवीजी ऑब्जेक्ट की विशेषताओं को बदल दिया जाता है, जिससे ब्राउज़र स्वचालित रूप से दृश्य को फिर से प्रस्तुत कर सकता है।
दूसरी ओर, कैनवास ऑब्जेक्ट तत्काल मोड (रेखापुंज ग्राफिक्स) में खींचे जाते हैं। उपरोक्त कैनवास उदाहरण में, आयत ड्रा ऑपरेशन कैनवास को संशोधित करता है, और आयत के रूप में इसका प्रतिनिधित्व सिस्टम द्वारा छोड़ दिया जाता है। यदि आयत की स्थिति बदलनी होटी है, जिससे कैनवास को फिर से बनाना होता है, जिसमें आयत द्वारा आवरण की गई कोई भी वस्तु सम्मिलित होती है। समकक्ष एसवीजी स्थिति में, कोई सरलता से आयत की स्थिति विशेषताओं को बदल सकता है और ब्राउज़र यह निर्धारित करेगा कि इसे कैसे दोबारा रंगना है। इस प्रकार अतिरिक्त जावास्क्रिप्ट लाइब्रेरी हैं जो कैनवास तत्व के अन्दर एसवीजी जैसी दृश्य क्षमताओं के लिए कैनवास मॉडल को अमूर्त करती हैं। एकाधिक कैनवास परतों का भी उपयोग किया जा सकता है, जिसका अर्थ है कि परिवर्तन की आवश्यकता होने पर केवल विशिष्ट परतों को फिर से बनाने की आवश्यकता होती है।
एसवीजी छवियों को एक्सएमएल में दर्शाया जाता है, और जटिल दृश्यों को एक्सएमएल संपादन टूल के साथ बनाया और बनाए रखा जा सकता है।
एसवीजी दृश्य ग्राफ़ घटना (कंप्यूटिंग) को वस्तुओं के साथ संबद्ध करने में सक्षम बनाता है, इसलिए आयत किसी पर प्रतिक्रिया दे सकता है onClick आयोजन कैनवास के साथ समान कार्यक्षमता प्राप्त करने के लिए, किसी को मैन्युअल रूप से माउस क्लिक के समन्वय प्रणाली को खींचे गए आयत के निर्देशांक के साथ मिलान करना होगा जिससे यह निर्धारित किया जा सके कि यह क्लिक किया गया था।
वैचारिक रूप से, कैनवास निम्न-स्तरीय एपीआई है जिस पर उच्च-स्तरीय इंटरफ़ेस बनाया जा सकता है (उदाहरण के लिए, एसवीजी समर्थन) ऐसे जावास्क्रिप्ट पुस्तकालय हैं इस प्रकार जो उन ब्राउज़रों के लिए कैनवास का उपयोग करके आंशिक एसवीजी कार्यान्वयन प्रदान करते हैं जो एसवीजी प्रदान नहीं करते हैं किन्तु कैनवास का समर्थन करते हैं, जैसे एंड्रॉइड 2.x में ब्राउज़र चूँकि, यह सामान्यतः स्थिति नहीं है वे स्वतंत्र मानक हैं। स्थिति जटिल है क्योंकि कैनवास के लिए दृश्य ग्राफ़ लाइब्रेरी हैं, और एसवीजी में कुछ बिटमैप कार्यक्षमता है।
प्रतिक्रियाएँ
इसकी प्रारंभ के समय, कैनवास तत्व को वेब मानक समुदाय से मिश्रित प्रतिक्रिया मिली थी। इस प्रकार स्केलेबल वेक्टर ग्राफ़िक्स मानक का समर्थन करने के अतिरिक्त नया स्वामित्व तत्व बनाने के ऐप्पल के फैसले के विरुद्ध तर्क दिए गए हैं। वाक्यविन्यास के बारे में अन्य चिंताएँ भी हैं, जैसे नामस्थान की अनुपस्थिति होती है।[5]
कैनवास पर बौद्धिक प्रोपर्टी
14 मार्च 2007 को, वेबकिट डेवलपर डेव हयात ने एप्पल के वरिष्ठ पेटेंट वकील, हेलेन प्लॉटका वर्कमैन से ईमेल अग्रेषित किया था ,[6] जिसमें कहा गया है कि एप्पल ने डब्ल्यूएचएटीडब्ल्यूजी के वेब एप्लिकेशन 1.0 वर्किंग ड्राफ्ट, दिनांक 24 मार्च 2005, धारा 10.1, जिसका शीर्षक "ग्राफिक्स: द बिटमैप कैनवास" है, इससे संबंधित सभी बौद्धिक प्रोपर्टी अधिकार सुरक्षित रखे हैं।[7] इस प्रकार किन्तु पेटेंट को लाइसेंस देने के लिए दरवाजा संवृत छोड़ दिया जाना चाहिए, विनिर्देश को पेटेंट के साथ मानक निकाय में स्थानांतरित किया जाना चाहिए। इससे वेब डेवलपर्स के बीच अधिक चर्चा हुई और विश्वव्यापी वेब संकाय (डब्ल्यू3सी) के रॉयल्टी-मुक्त लाइसेंस के स्पष्ट समर्थन की तुलना में डब्ल्यूएचएटीडब्ल्यूजी की पेटेंट पर नीति की कमी के बारे में सवाल उठे थे। इस प्रकार एप्पल ने बाद में डब्ल्यू3सी की रॉयल्टी-मुक्त पेटेंट लाइसेंसिंग नियमो के अनुसार पेटेंट का खुलासा किया था।[8] प्रकटीकरण का अर्थ है कि जब भी कैनवस तत्व एचटीएमएल कार्य समूह द्वारा बनाई गई भविष्य की डब्ल्यू3सी अनुशंसा का भाग बन जाता है, जिससे एप्पल को पेटेंट के लिए रॉयल्टी-मुक्त लाइसेंस प्रदान करना आवश्यक होता है।[9]
गोपनीयता संबंधी चिंताएँ
कैनवास फ़िंगरप्रिंटिंग ऑनलाइन उपयोगकर्ताओं को ट्रैक करने के लिए कई ब्राउज़र फ़िंगरप्रिंटिंग तकनीकों में से है जो वेबसाइटों को एचटीएमएल5 कैनवास तत्व का उपयोग करके आगंतुकों को पहचानने और ट्रैक करने की अनुमति देती है। इस प्रकार इस तकनीक को 2014 में व्यापक मीडिया आवरणेज प्राप्त हुआ था ,[10][11][12][13] प्रिंसटन विश्वविद्यालय और ल्यूवेन के कैथोलिक विश्वविद्यालय के शोधकर्ताओं ने अपने पेपर द वेब नेवर फॉरगेट्स में इसका वर्णन किया था।[14] कैनवास फ़िंगरप्रिंटिंग के संबंध में गोपनीयता संबंधी चिंताएँ इस तथ्य पर केन्द्रित हैं कि कुकीज़ हटाना और कैश साफ़ करना भी उपयोगकर्ताओं के लिए ऑनलाइन ट्रैकिंग से बचने के लिए पर्याप्त नहीं होता है।
ब्राउज़र समर्थन
यह तत्व मोज़िला फ़ायरफ़ॉक्स, गूगल क्रोम, इंटरनेट एक्सप्लोरर, सफारी (वेब ब्राउज़र), विजेता , ओपेरा (वेब ब्राउज़र) और माइक्रोसॉफ्ट के वर्तमान संस्करणों द्वारा समर्थित है।[15][16]
यह भी देखें
- एंटी ग्रेन ज्यामिति (एजीजी)
- कैरो (ग्राफिक्स)
- पोस्टस्क्रिप्ट प्रदर्शित करें
- ग्राफ़िक्स डिवाइस इंटरफ़ेस (जीडीआई+)
- क्वार्टज़ 2डी
- वेबजीएल
संदर्भ
- ↑ Ian Hixie (2004-07-12). "HTML का विस्तार". Retrieved 2011-06-13.
- ↑ Mozilla Developer Connection. "HTMLCanvasElement". Archived from the original on 2011-06-04. Retrieved 2011-06-13.
- ↑ "Opera 9.0 changelog". Archived from the original on 2012-09-10. Retrieved 2006-06-20.
- ↑ "Scalable Vector Graphics | CorelDRAW". www.coreldraw.com. Retrieved 2022-09-23.
- ↑ Ian Hickson remarks regarding canvas and other Apple extensions to HTML
- ↑ "[whatwg] Web Applications 1.0 Draft, David Hyatt, Wed Mar 14 14:31:53 PDT 2007". Archived from the original on 2007-05-02. Retrieved 2007-05-01.
- ↑ Web Applications 1.0 Early Working Draft - Dynamic graphics: The bitmap canvas
- ↑ HTML Working Group Patent Policy Status – Known Disclosures
- ↑ W3C patent policy in use by HTML working group
- ↑ Knibbs, Kate (July 21, 2014). "सबसे गुप्त नए ऑनलाइन ट्रैकिंग टूल के बारे में आपको क्या जानना चाहिए". Gizmodo. Retrieved July 21, 2014.
- ↑ Joseph Steinberg (July 23, 2014). "आपको एक गुप्त नई तकनीक द्वारा ऑनलाइन ट्रैक किया जा रहा है - यहां वह है जो आपको जानना आवश्यक है". Forbes. Retrieved November 15, 2014.
- ↑ Angwin, Julia (July 21, 2014). "मिलिए उस ऑनलाइन ट्रैकिंग डिवाइस से जिसे ब्लॉक करना लगभग असंभव है". ProPublica. Retrieved July 21, 2014.
- ↑ Kirk, Jeremy (July 21, 2014). "गुप्त वेब ट्रैकिंग उपकरण उपयोगकर्ताओं के लिए गोपनीयता जोखिम बढ़ा रहे हैं". PC World. Retrieved July 21, 2014.
- ↑ Acar, Gunes; Eubank, Christian; Englehardt, Steven; Juarez, Marc; Narayanan, Arvind; Diaz, Claudia (July 24, 2014). "The Web never forgets: Persistent tracking mechanisms in the wild". Retrieved July 24, 2014.
- ↑ Sucan, Mihai (4 Feb 2010). "SVG or Canvas? Сhoosing between the two". Opera Software. Archived from the original on 23 June 2010. Retrieved 3 May 2010.
- ↑ "Canvas, Microsoft Edge documentation".
बाहरी संबंध
- The
canvaselement, W3C, 2014-10-28, retrieved 2015-01-09 - HTML Canvas 2D Context, W3C, 2014-08-21, retrieved 2015-01-09
- Canvas description in डब्ल्यूएचएटीडब्ल्यूजी Web Applications draft specifications
- Canvas reference page in एप्पल Developers Connection
- Basic Canvas Tutorial on Opera Developer Community
- Canvas tutorial and introductory page on Mozilla Developer center Archived 2012-08-03 at the Wayback Machine
