कैनवास एलिमेंट
| HTML |
|---|
| Comparisons |
कैनवास तत्व HTML5 का हिस्सा है और आकार और बिटमैप छवियों के गतिशील, स्क्रिप्टिंग भाषा प्रतिपादन (कंप्यूटर ग्राफिक्स) की अनुमति देता है। यह निम्न स्तरीय, प्रक्रियात्मक मॉडल है जो बिटमैप को अद्यतन करता है। HTML5 कैनवस वीडियो गेम ग्राफ़िक्स बनाने में भी मदद करता है।
जबकि HTML5 कैनवास अपनी स्वयं की 2D ड्राइंग API प्रदान करता है, यह OpenGL ES के साथ 3D रेंडरिंग की अनुमति देने के लिए WebGL API का भी समर्थन करता है।
इतिहास
कैनवस को शुरुआत में 2004 में अपने स्वयं के Mac OS X वेबकिट घटक में उपयोग के लिए ऐप्पल इंक द्वारा पेश किया गया था,[1] डैशबोर्ड (मैक ओएस) विजेट टूलकिट और सफारी (वेब ब्राउज़र) ब्राउज़र जैसे अनुप्रयोगों को सशक्त बनाना। बाद में, 2005 में, इसे गेको (सॉफ़्टवेयर) ब्राउज़र के संस्करण 1.8 में अपनाया गया,[2] और 2006 में ओपेरा (वेब ब्राउज़र),[3] और अगली पीढ़ी की वेब प्रौद्योगिकियों के लिए नई प्रस्तावित विशिष्टताओं पर वेब हाइपरटेक्स्ट एप्लीकेशन टेक्नोलॉजी वर्किंग ग्रुप (WHATWG) द्वारा मानकीकृत किया गया है।
उपयोग
ए canvas ऊंचाई और चौड़ाई विशेषताओं के साथ HTML कोड में परिभाषित खींचने योग्य क्षेत्र शामिल है। जावास्क्रिप्ट कोड अन्य सामान्य 2डी एपीआई के समान ड्राइंग कार्यों के पूरे सेट के माध्यम से क्षेत्र तक पहुंच सकता है, इस प्रकार गतिशील रूप से उत्पन्न ग्राफिक्स की अनुमति देता है। कैनवास के कुछ प्रत्याशित उपयोगों में ग्राफ़ बनाना, एनिमेशन, गेम और छवि संरचना शामिल हैं।
कैनवास के साथ इंटरैक्ट करने में कैनवास के रेंडरिंग संदर्भ को प्राप्त करना शामिल है, जो यह निर्धारित करता है कि कैनवास एपीआई, वेबजीएल, या वेबजीएल2 रेंडरिंग (कंप्यूटर ग्राफिक्स) संदर्भ का उपयोग करना है या नहीं।
उदाहरण
निम्नलिखित कोड HTML पृष्ठ में कैनवास तत्व बनाता है:
<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] जिसमें कहा गया है कि Apple ने WHATWG के वेब एप्लिकेशन 1.0 वर्किंग ड्राफ्ट, दिनांक 24 मार्च 2005, धारा 10.1, जिसका शीर्षक "ग्राफिक्स: द बिटमैप कैनवास" है, से संबंधित सभी बौद्धिक संपदा अधिकार सुरक्षित रखे हैं।[7] लेकिन पेटेंट को लाइसेंस देने के लिए दरवाजा खुला छोड़ दिया जाना चाहिए, विनिर्देश को पेटेंट के साथ मानक निकाय में स्थानांतरित किया जाना चाहिए। इससे वेब डेवलपर्स के बीच काफी चर्चा हुई और विश्वव्यापी वेब संकाय (W3C) के रॉयल्टी-मुक्त लाइसेंस के स्पष्ट समर्थन की तुलना में WHATWG की पेटेंट पर नीति की कमी के बारे में सवाल उठे। Apple ने बाद में W3C की रॉयल्टी-मुक्त पेटेंट लाइसेंसिंग शर्तों के तहत पेटेंट का खुलासा किया।[8] प्रकटीकरण का अर्थ है कि जब भी कैनवस तत्व HTML कार्य समूह द्वारा बनाई गई भविष्य की W3C अनुशंसा का हिस्सा बन जाता है, तो Apple को पेटेंट के लिए रॉयल्टी-मुक्त लाइसेंस प्रदान करना आवश्यक होता है।[9]
गोपनीयता संबंधी चिंताएँ
कैनवास फ़िंगरप्रिंटिंग ऑनलाइन उपयोगकर्ताओं को ट्रैक करने के लिए कई ब्राउज़र फ़िंगरप्रिंटिंग तकनीकों में से है जो वेबसाइटों को HTML5 कैनवास तत्व का उपयोग करके आगंतुकों को पहचानने और ट्रैक करने की अनुमति देती है। इस तकनीक को 2014 में व्यापक मीडिया कवरेज प्राप्त हुआ,[10][11][12][13] प्रिंसटन विश्वविद्यालय और ल्यूवेन के कैथोलिक विश्वविद्यालय के शोधकर्ताओं ने अपने पेपर द वेब नेवर फॉरगेट्स में इसका वर्णन किया।[14] कैनवास फ़िंगरप्रिंटिंग के संबंध में गोपनीयता संबंधी चिंताएँ इस तथ्य पर केन्द्रित हैं कि कुकीज़ हटाना और कैश साफ़ करना भी उपयोगकर्ताओं के लिए ऑनलाइन ट्रैकिंग से बचने के लिए पर्याप्त नहीं होगा।
ब्राउज़र समर्थन
यह तत्व मोज़िला फ़ायरफ़ॉक्स, गूगल क्रोम, इंटरनेट एक्सप्लोरर, सफारी (वेब ब्राउज़र), विजेता , ओपेरा (वेब ब्राउज़र) के वर्तमान संस्करणों द्वारा समर्थित है।[15] और माइक्रोसॉफ्ट बढ़त ।[16]
यह भी देखें
- अनाज विरोधी ज्यामिति (एजीजी)
- काहिरा (ग्राफिक्स)
- पोस्टस्क्रिप्ट प्रदर्शित करें
- ग्राफ़िक्स डिवाइस इंटरफ़ेस (GDI+)
- क्वार्टज़ 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 WHATWG Web Applications draft specifications
- Canvas reference page in Apple 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
