कैनवास एलिमेंट: Difference between revisions

From Vigyanwiki
m (10 revisions imported from alpha:कैनवास_तत्व)
No edit summary
 
(4 intermediate revisions by 2 users not shown)
Line 3: Line 3:


{{HTML}}
{{HTML}}
'''कैनवास अवयव''' [[HTML5|एचटीएमएल5]] का भाग है और [[आकार]] और [[बिटमैप]] छवियों के गतिशील, स्क्रिप्टिंग भाषा [[ प्रतिपादन (कंप्यूटर ग्राफिक्स) |प्रतिपादन (कंप्यूटर ग्राफिक्स)]] की अनुमति देता है। यह निम्न स्तरीय, प्रक्रियात्मक मॉडल है जो बिटमैप को अद्यतन करता है। एचटीएमएल5 कैनवस [[वीडियो गेम ग्राफ़िक्स]] बनाने में भी सहायता करता है।
'''कैनवास एलिमेंट''' [[HTML5|एचटीएमएल5]] का भाग है और [[आकार]] और [[बिटमैप]] छवियों के गतिशील, स्क्रिप्टिंग भाषा [[ प्रतिपादन (कंप्यूटर ग्राफिक्स) |प्रतिपादन (कंप्यूटर ग्राफिक्स)]] की अनुमति देता है। यह निम्न स्तरीय, प्रक्रियात्मक मॉडल है जो बिटमैप को अद्यतन करता है। एचटीएमएल5 कैनवस [[वीडियो गेम ग्राफ़िक्स]] बनाने में भी सहायता करता है।


जबकि एचटीएमएल5 कैनवास अपनी स्वयं की 2डी ड्राइंग [[API|एपीआई]] प्रदान करता है, यह [[OpenGL ES|ओपनजीएल ईएस]] के साथ 3डी रेंडरिंग की अनुमति देने के लिए [[WebGL|वेबजीएल]] एपीआई का भी समर्थन करता है।
जबकि एचटीएमएल5 कैनवास अपनी स्वयं की 2डी ड्राइंग [[API|एपीआई]] प्रदान करता है, यह [[OpenGL ES|ओपनजीएल ईएस]] के साथ 3डी रेंडरिंग की अनुमति देने के लिए [[WebGL|वेबजीएल]] एपीआई का भी समर्थन करता है।
Line 16: Line 16:


== उदाहरण ==
== उदाहरण ==
निम्नलिखित कोड एचटीएमएल पृष्ठ में कैनवास अवयव बनाता है:
निम्नलिखित कोड एचटीएमएल पृष्ठ में कैनवास एलिमेंटबनाता है:
<syntaxhighlight lang=html>
<syntaxhighlight lang=html>
<canvas id="example" width="200" height="200">
<canvas id="example" width="200" height="200">
Line 33: Line 33:
कैनवस एपीआई <code>save()</code> और <code>restore()</code> भी प्रदान करता है , कैनवास संदर्भ की सभी विशेषताओं को सहेजने और पुनर्स्थापित करने के लिए उपयोग की जाती है।
कैनवस एपीआई <code>save()</code> और <code>restore()</code> भी प्रदान करता है , कैनवास संदर्भ की सभी विशेषताओं को सहेजने और पुनर्स्थापित करने के लिए उपयोग की जाती है।


== कैनवास अवयव का आकार बनाम ड्राइंग सतह का आकार ==
== कैनवास एलिमेंटका आकार बनाम ड्राइंग सतह का आकार ==


एक कैनवास के वास्तव में दो आकार होते हैं: अवयव का आकार और अवयव की ड्राइंग सतह का आकार अवयव की चौड़ाई और ऊंचाई विशेषताएँ स्थित करने से ये दोनों आकार निर्धारित होते हैं; [[सीएसएस]] विशेषताएँ केवल अवयव के आकार को प्रभावित करती हैं।
एक कैनवास के वास्तव में दो आकार होते हैं: एलिमेंटका आकार और एलिमेंटकी ड्राइंग सतह का आकार एलिमेंटकी चौड़ाई और ऊंचाई विशेषताएँ स्थित करने से ये दोनों आकार निर्धारित होते हैं; [[सीएसएस]] विशेषताएँ केवल एलिमेंटके आकार को प्रभावित करती हैं।


डिफ़ॉल्ट रूप से, कैनवास अवयव का आकार और उसकी ड्राइंग सतह का आकार दोनों 300 स्क्रीन पिक्सल चौड़ा और 150 स्क्रीन पिक्सल ऊंचा है। उदाहरण में दिखाई गई सूची में जो कैनवास अवयव के आकार को सेट करने के लिए सीएसएस का उपयोग करता है, अवयव का आकार 600 [[पिक्सेल]] चौड़ा और 300 पिक्सेल ऊंचा है, किन्तु ड्राइंग सतह का आकार 300 पिक्सेल × 150 के डिफ़ॉल्ट मान पर अपरिवर्तित रहता है पिक्सल जब किसी कैनवास अवयव का आकार उसकी ड्राइंग सतह के आकार से मेल नहीं खाता है, जिससे ब्राउज़र अवयव को फिट करने के लिए ड्राइंग सतह को मापता है (जिसके परिणामस्वरूप आश्चर्यजनक और अवांछित प्रभाव हो सकते हैं)।                               
डिफ़ॉल्ट रूप से, कैनवास एलिमेंटका आकार और उसकी ड्राइंग सतह का आकार दोनों 300 स्क्रीन पिक्सल चौड़ा और 150 स्क्रीन पिक्सल ऊंचा है। उदाहरण में दिखाई गई सूची में जो कैनवास एलिमेंटके आकार को सेट करने के लिए सीएसएस का उपयोग करता है, एलिमेंटका आकार 600 [[पिक्सेल]] चौड़ा और 300 पिक्सेल ऊंचा है, किन्तु ड्राइंग सतह का आकार 300 पिक्सेल × 150 के डिफ़ॉल्ट मान पर अपरिवर्तित रहता है पिक्सल जब किसी कैनवास एलिमेंटका आकार उसकी ड्राइंग सतह के आकार से मेल नहीं खाता है, जिससे ब्राउज़र एलिमेंटको फिट करने के लिए ड्राइंग सतह को मापता है (जिसके परिणामस्वरूप आश्चर्यजनक और अवांछित प्रभाव हो सकते हैं)।                               


अवयव का आकार निर्धारित करने और सतह के आकार को विभिन्न मानों पर चित्रित करने का उदाहरण:
एलिमेंटका आकार निर्धारित करने और सतह के आकार को विभिन्न मानों पर चित्रित करने का उदाहरण:


<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
Line 71: Line 71:
[[स्केलेबल वेक्टर ग्राफिक्स]] ब्राउज़र में आकृतियाँ बनाने का वैकल्पिक विधि है।<ref>{{Cite web |title=Scalable Vector Graphics {{!}} CorelDRAW |url=https://www.coreldraw.com/en/learn/guide-to-vector-design/scalable-vector-graphics/ |access-date=2022-09-23 |website=www.coreldraw.com}}</ref> कैनवास के विपरीत, जो रैस्टर ग्राफ़िक्स-आधारित है, एसवीजी वेक्टर ग्राफ़िक्स-आधारित है, जिससे प्रत्येक खींची गई आकृति को [[दृश्य ग्राफ]] या [[दस्तावेज़ ऑब्जेक्ट मॉडल]] में ऑब्जेक्ट के रूप में याद किया जा सकता है, जिसे बाद में बिटमैप में प्रस्तुत किया जाता है। इसका कारण यह है कि यदि किसी एसवीजी ऑब्जेक्ट की विशेषताओं को बदल दिया जाता है, जिससे ब्राउज़र स्वचालित रूप से दृश्य को फिर से प्रस्तुत कर सकता है।
[[स्केलेबल वेक्टर ग्राफिक्स]] ब्राउज़र में आकृतियाँ बनाने का वैकल्पिक विधि है।<ref>{{Cite web |title=Scalable Vector Graphics {{!}} CorelDRAW |url=https://www.coreldraw.com/en/learn/guide-to-vector-design/scalable-vector-graphics/ |access-date=2022-09-23 |website=www.coreldraw.com}}</ref> कैनवास के विपरीत, जो रैस्टर ग्राफ़िक्स-आधारित है, एसवीजी वेक्टर ग्राफ़िक्स-आधारित है, जिससे प्रत्येक खींची गई आकृति को [[दृश्य ग्राफ]] या [[दस्तावेज़ ऑब्जेक्ट मॉडल]] में ऑब्जेक्ट के रूप में याद किया जा सकता है, जिसे बाद में बिटमैप में प्रस्तुत किया जाता है। इसका कारण यह है कि यदि किसी एसवीजी ऑब्जेक्ट की विशेषताओं को बदल दिया जाता है, जिससे ब्राउज़र स्वचालित रूप से दृश्य को फिर से प्रस्तुत कर सकता है।


दूसरी ओर कैनवास ऑब्जेक्ट तत्काल मोड ([[रेखापुंज ग्राफिक्स]]) में खींचे जाते हैं। उपरोक्त कैनवास उदाहरण में, आयत ड्रा ऑपरेशन कैनवास को संशोधित करता है, और आयत के रूप में इसका प्रतिनिधित्व सिस्टम द्वारा छोड़ दिया जाता है। यदि आयत की स्थिति बदलनी होटी है, जिससे कैनवास को फिर से बनाना होता है, जिसमें आयत द्वारा आवरण की गई कोई भी वस्तु सम्मिलित होती है। समकक्ष एसवीजी स्थिति में, कोई सरलता से आयत की स्थिति विशेषताओं को बदल सकता है और ब्राउज़र यह निर्धारित करेगा कि इसे कैसे दोबारा रंगना है। इस प्रकार अतिरिक्त [[जावास्क्रिप्ट लाइब्रेरी]] हैं जो कैनवास अवयव के अन्दर एसवीजी जैसी दृश्य क्षमताओं के लिए कैनवास मॉडल को अमूर्त करती हैं। एकाधिक कैनवास परतों का भी उपयोग किया जा सकता है, जिसका अर्थ है कि परिवर्तन की आवश्यकता होने पर केवल विशिष्ट परतों को फिर से बनाने की आवश्यकता होती है।
दूसरी ओर कैनवास ऑब्जेक्ट तत्काल मोड ([[रेखापुंज ग्राफिक्स]]) में खींचे जाते हैं। उपरोक्त कैनवास उदाहरण में, आयत ड्रा ऑपरेशन कैनवास को संशोधित करता है, और आयत के रूप में इसका प्रतिनिधित्व सिस्टम द्वारा छोड़ दिया जाता है। यदि आयत की स्थिति बदलनी होटी है, जिससे कैनवास को फिर से बनाना होता है, जिसमें आयत द्वारा आवरण की गई कोई भी वस्तु सम्मिलित होती है। समकक्ष एसवीजी स्थिति में, कोई सरलता से आयत की स्थिति विशेषताओं को बदल सकता है और ब्राउज़र यह निर्धारित करेगा कि इसे कैसे दोबारा रंगना है। इस प्रकार अतिरिक्त [[जावास्क्रिप्ट लाइब्रेरी]] हैं जो कैनवास एलिमेंटके अन्दर एसवीजी जैसी दृश्य क्षमताओं के लिए कैनवास मॉडल को अमूर्त करती हैं। एकाधिक कैनवास परतों का भी उपयोग किया जा सकता है, जिसका अर्थ है कि परिवर्तन की आवश्यकता होने पर केवल विशिष्ट परतों को फिर से बनाने की आवश्यकता होती है।


एसवीजी छवियों को [[एक्सएमएल]] में दर्शाया जाता है, और जटिल दृश्यों को एक्सएमएल संपादन उपकरण के साथ बनाया और बनाए रखा जा सकता है।
एसवीजी छवियों को [[एक्सएमएल]] में दर्शाया जाता है, और जटिल दृश्यों को एक्सएमएल संपादन उपकरण के साथ बनाया और बनाए रखा जा सकता है।
Line 80: Line 80:


== प्रतिक्रियाएँ        ==
== प्रतिक्रियाएँ        ==
इसकी प्रारंभ के समय, कैनवास अवयव को वेब मानक समुदाय से मिश्रित प्रतिक्रिया मिली थी। इस प्रकार स्केलेबल वेक्टर ग्राफ़िक्स मानक का समर्थन करने के अतिरिक्त नया स्वामित्व अवयव बनाने के ऐप्पल के फैसले के विरुद्ध तर्क दिए गए हैं। वाक्यविन्यास के बारे में अन्य चिंताएँ भी हैं, जैसे नामस्थान की अनुपस्थिति होती है।<ref>[http://ln.hixie.ch/?start=1089635050&count=1 Ian Hickson remarks regarding canvas and other Apple extensions to HTML]</ref>
इसकी प्रारंभ के समय, कैनवास एलिमेंटको वेब मानक समुदाय से मिश्रित प्रतिक्रिया मिली थी। इस प्रकार स्केलेबल वेक्टर ग्राफ़िक्स मानक का समर्थन करने के अतिरिक्त नया स्वामित्व एलिमेंटबनाने के ऐप्पल के फैसले के विरुद्ध तर्क दिए गए हैं। वाक्यविन्यास के बारे में अन्य चिंताएँ भी हैं, जैसे नामस्थान की अनुपस्थिति होती है।<ref>[http://ln.hixie.ch/?start=1089635050&count=1 Ian Hickson remarks regarding canvas and other Apple extensions to HTML]</ref>
=== कैनवास पर बौद्धिक प्रोपर्टी ===
=== कैनवास पर बौद्धिक प्रोपर्टी ===
14 मार्च 2007 को, वेबकिट डेवलपर [[डेव हयात]] ने एप्पल के वरिष्ठ पेटेंट वकील, हेलेन प्लॉटका वर्कमैन से ईमेल अग्रेषित किया था ,<ref>{{Cite web |url=http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-March/010129.html |title=<nowiki>&#91;whatwg&#93;</nowiki> Web Applications 1.0 Draft, David Hyatt, Wed Mar 14 14:31:53 PDT 2007 |access-date=2007-05-01 |archive-url=https://web.archive.org/web/20070502083225/http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-March/010129.html |archive-date=2007-05-02 |url-status=dead }}</ref> जिसमें कहा गया है कि एप्पल ने डब्ल्यूएचएटीडब्ल्यूजी के वेब एप्लिकेशन 1.0 वर्किंग ड्राफ्ट, दिनांक 24 मार्च 2005, धारा 10.1, जिसका शीर्षक "ग्राफिक्स: द बिटमैप कैनवास" है, इससे संबंधित सभी [[बौद्धिक संपदा|बौद्धिक प्रोपर्टी]] अधिकार सुरक्षित रखे हैं।<ref>[http://www.whatwg.org/specs/web-apps//#scs-dynamic Web Applications 1.0 Early Working Draft - ''Dynamic graphics: The bitmap canvas'']</ref> इस प्रकार किन्तु [[पेटेंट]] को लाइसेंस देने के लिए दरवाजा संवृत छोड़ दिया जाना चाहिए, विनिर्देश को पेटेंट के साथ मानक निकाय में स्थानांतरित किया जाना चाहिए। इससे वेब डेवलपर्स के बीच अधिक चर्चा हुई और [[ विश्वव्यापी वेब संकाय |विश्वव्यापी वेब संकाय]] (डब्ल्यू3सी) के रॉयल्टी-मुक्त लाइसेंस के स्पष्ट समर्थन की तुलना में डब्ल्यूएचएटीडब्ल्यूजी की पेटेंट पर नीति की कमी के बारे में प्रश्न उठे थे। इस प्रकार एप्पल ने बाद में डब्ल्यू3सी की रॉयल्टी-मुक्त पेटेंट लाइसेंसिंग नियमो के अनुसार पेटेंट का अनावरण किया था।<ref>[http://www.w3.org/2004/01/pp-impl/40318/status#current-disclosures HTML Working Group Patent Policy Status&nbsp;– Known Disclosures]</ref> प्रकटीकरण का अर्थ है कि जब भी कैनवस अवयव एचटीएमएल कार्य समूह द्वारा बनाई गई भविष्य की डब्ल्यू3सी अनुशंसा का भाग बन जाता है, जिससे एप्पल को पेटेंट के लिए रॉयल्टी-मुक्त लाइसेंस प्रदान करना आवश्यक होता है।<ref>[http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-W3C-RF-license W3C patent policy in use by HTML working group]</ref>
14 मार्च 2007 को, वेबकिट डेवलपर [[डेव हयात]] ने एप्पल के वरिष्ठ पेटेंट वकील, हेलेन प्लॉटका वर्कमैन से ईमेल अग्रेषित किया था ,<ref>{{Cite web |url=http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-March/010129.html |title=<nowiki>&#91;whatwg&#93;</nowiki> Web Applications 1.0 Draft, David Hyatt, Wed Mar 14 14:31:53 PDT 2007 |access-date=2007-05-01 |archive-url=https://web.archive.org/web/20070502083225/http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-March/010129.html |archive-date=2007-05-02 |url-status=dead }}</ref> जिसमें कहा गया है कि एप्पल ने डब्ल्यूएचएटीडब्ल्यूजी के वेब एप्लिकेशन 1.0 वर्किंग ड्राफ्ट, दिनांक 24 मार्च 2005, धारा 10.1, जिसका शीर्षक "ग्राफिक्स: द बिटमैप कैनवास" है, इससे संबंधित सभी [[बौद्धिक संपदा|बौद्धिक प्रोपर्टी]] अधिकार सुरक्षित रखे हैं।<ref>[http://www.whatwg.org/specs/web-apps//#scs-dynamic Web Applications 1.0 Early Working Draft - ''Dynamic graphics: The bitmap canvas'']</ref> इस प्रकार किन्तु [[पेटेंट]] को लाइसेंस देने के लिए दरवाजा संवृत छोड़ दिया जाना चाहिए, विनिर्देश को पेटेंट के साथ मानक निकाय में स्थानांतरित किया जाना चाहिए। इससे वेब डेवलपर्स के बीच अधिक चर्चा हुई और [[ विश्वव्यापी वेब संकाय |विश्वव्यापी वेब संकाय]] (डब्ल्यू3सी) के रॉयल्टी-मुक्त लाइसेंस के स्पष्ट समर्थन की तुलना में डब्ल्यूएचएटीडब्ल्यूजी की पेटेंट पर नीति की कमी के बारे में प्रश्न उठे थे। इस प्रकार एप्पल ने बाद में डब्ल्यू3सी की रॉयल्टी-मुक्त पेटेंट लाइसेंसिंग नियमो के अनुसार पेटेंट का अनावरण किया था।<ref>[http://www.w3.org/2004/01/pp-impl/40318/status#current-disclosures HTML Working Group Patent Policy Status&nbsp;– Known Disclosures]</ref> प्रकटीकरण का अर्थ है कि जब भी कैनवस एलिमेंटएचटीएमएल कार्य समूह द्वारा बनाई गई भविष्य की डब्ल्यू3सी अनुशंसा का भाग बन जाता है, जिससे एप्पल को पेटेंट के लिए रॉयल्टी-मुक्त लाइसेंस प्रदान करना आवश्यक होता है।<ref>[http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-W3C-RF-license W3C patent policy in use by HTML working group]</ref>
=== गोपनीयता संबंधी चिंताएँ ===
=== गोपनीयता संबंधी चिंताएँ ===
[[कैनवास फ़िंगरप्रिंटिंग]] ऑनलाइन उपयोगकर्ताओं को ट्रैक करने के लिए कई [[ब्राउज़र फ़िंगरप्रिंटिंग]] तकनीकों में से है जो वेबसाइटों को एचटीएमएल5 कैनवास अवयव का उपयोग करके आगंतुकों को पहचानने और ट्रैक करने की अनुमति देती है। इस प्रकार इस तकनीक को 2014 में व्यापक मीडिया आवरणेज प्राप्त हुआ था ,<ref name=Knibbs>{{cite web | url=https://gizmodo.com/what-you-need-to-know-about-the-sneakiest-new-online-tr-1608455771 | title=सबसे गुप्त नए ऑनलाइन ट्रैकिंग टूल के बारे में आपको क्या जानना चाहिए| website=[[Gizmodo]] | date=July 21, 2014 | access-date=July 21, 2014 | author=Knibbs, Kate}}</ref><ref name=Steinberg>{{cite magazine | url=https://www.forbes.com/sites/josephsteinberg/2014/07/23/you-are-being-tracked-online-by-a-sneaky-new-technology-heres-what-you-need-to-know/ | title=आपको एक गुप्त नई तकनीक द्वारा ऑनलाइन ट्रैक किया जा रहा है - यहां वह है जो आपको जानना आवश्यक है| date=July 23, 2014 | magazine=[[Forbes]] |  access-date=November 15, 2014 | author=Joseph Steinberg }}</ref><ref name=Angwin>{{cite web | url=https://www.propublica.org/article/meet-the-online-tracking-device-that-is-virtually-impossible-to-block | title=मिलिए उस ऑनलाइन ट्रैकिंग डिवाइस से जिसे ब्लॉक करना लगभग असंभव है| publisher=[[ProPublica]] | date=July 21, 2014 | access-date=July 21, 2014 | author=Angwin, Julia | author-link=Julia Angwin}}</ref><ref name=Kirk>{{cite magazine | url=http://www.pcworld.com/article/2456640/stealthy-web-tracking-tools-pose-increasing-privacy-risks-to-users.html | title=गुप्त वेब ट्रैकिंग उपकरण उपयोगकर्ताओं के लिए गोपनीयता जोखिम बढ़ा रहे हैं| magazine=[[PC World]] | date=July 21, 2014 | access-date=July 21, 2014 | author=Kirk, Jeremy}}</ref> [[ प्रिंसटन विश्वविद्यालय |प्रिंसटन विश्वविद्यालय]] और [[ल्यूवेन के कैथोलिक विश्वविद्यालय]] के शोधकर्ताओं ने अपने पेपर द वेब नेवर फॉरगेट्स में इसका वर्णन किया था।<ref name=WebNeverForgets>{{cite web | url=https://securehomes.esat.kuleuven.be/~gacar/persistent/index.html | title=The Web never forgets: Persistent tracking mechanisms in the wild | date=July 24, 2014 |  access-date=July 24, 2014 | author=Acar, Gunes | author2=Eubank, Christian  | author3=Englehardt, Steven | author4=Juarez, Marc | author5=Narayanan, Arvind | author6=Diaz, Claudia }}</ref> कैनवास फ़िंगरप्रिंटिंग के संबंध में गोपनीयता संबंधी चिंताएँ इस तथ्य पर केन्द्रित हैं कि कुकीज़ हटाना और कैश साफ़ करना भी उपयोगकर्ताओं के लिए ऑनलाइन ट्रैकिंग से बचने के लिए पर्याप्त नहीं होता है।
[[कैनवास फ़िंगरप्रिंटिंग]] ऑनलाइन उपयोगकर्ताओं को ट्रैक करने के लिए कई [[ब्राउज़र फ़िंगरप्रिंटिंग]] तकनीकों में से है जो वेबसाइटों को एचटीएमएल5 कैनवास एलिमेंटका उपयोग करके आगंतुकों को पहचानने और ट्रैक करने की अनुमति देती है। इस प्रकार इस तकनीक को 2014 में व्यापक मीडिया आवरणेज प्राप्त हुआ था ,<ref name=Knibbs>{{cite web | url=https://gizmodo.com/what-you-need-to-know-about-the-sneakiest-new-online-tr-1608455771 | title=सबसे गुप्त नए ऑनलाइन ट्रैकिंग टूल के बारे में आपको क्या जानना चाहिए| website=[[Gizmodo]] | date=July 21, 2014 | access-date=July 21, 2014 | author=Knibbs, Kate}}</ref><ref name=Steinberg>{{cite magazine | url=https://www.forbes.com/sites/josephsteinberg/2014/07/23/you-are-being-tracked-online-by-a-sneaky-new-technology-heres-what-you-need-to-know/ | title=आपको एक गुप्त नई तकनीक द्वारा ऑनलाइन ट्रैक किया जा रहा है - यहां वह है जो आपको जानना आवश्यक है| date=July 23, 2014 | magazine=[[Forbes]] |  access-date=November 15, 2014 | author=Joseph Steinberg }}</ref><ref name=Angwin>{{cite web | url=https://www.propublica.org/article/meet-the-online-tracking-device-that-is-virtually-impossible-to-block | title=मिलिए उस ऑनलाइन ट्रैकिंग डिवाइस से जिसे ब्लॉक करना लगभग असंभव है| publisher=[[ProPublica]] | date=July 21, 2014 | access-date=July 21, 2014 | author=Angwin, Julia | author-link=Julia Angwin}}</ref><ref name=Kirk>{{cite magazine | url=http://www.pcworld.com/article/2456640/stealthy-web-tracking-tools-pose-increasing-privacy-risks-to-users.html | title=गुप्त वेब ट्रैकिंग उपकरण उपयोगकर्ताओं के लिए गोपनीयता जोखिम बढ़ा रहे हैं| magazine=[[PC World]] | date=July 21, 2014 | access-date=July 21, 2014 | author=Kirk, Jeremy}}</ref> [[ प्रिंसटन विश्वविद्यालय |प्रिंसटन विश्वविद्यालय]] और [[ल्यूवेन के कैथोलिक विश्वविद्यालय]] के शोधकर्ताओं ने अपने पेपर द वेब नेवर फॉरगेट्स में इसका वर्णन किया था।<ref name=WebNeverForgets>{{cite web | url=https://securehomes.esat.kuleuven.be/~gacar/persistent/index.html | title=The Web never forgets: Persistent tracking mechanisms in the wild | date=July 24, 2014 |  access-date=July 24, 2014 | author=Acar, Gunes | author2=Eubank, Christian  | author3=Englehardt, Steven | author4=Juarez, Marc | author5=Narayanan, Arvind | author6=Diaz, Claudia }}</ref> कैनवास फ़िंगरप्रिंटिंग के संबंध में गोपनीयता संबंधी चिंताएँ इस तथ्य पर केन्द्रित हैं कि कुकीज़ हटाना और कैश साफ़ करना भी उपयोगकर्ताओं के लिए ऑनलाइन ट्रैकिंग से बचने के लिए पर्याप्त नहीं होता है।


== ब्राउज़र समर्थन ==
== ब्राउज़र समर्थन ==
यह अवयव [[मोज़िला फ़ायरफ़ॉक्स]], [[गूगल क्रोम]], [[इंटरनेट एक्सप्लोरर]], सफारी (वेब ​​ब्राउज़र), [[ विजेता |विजेता]] , ओपेरा (वेब ​​ब्राउज़र) और [[ माइक्रोसॉफ्ट बढ़त |माइक्रोसॉफ्ट]] के वर्तमान संस्करणों द्वारा समर्थित है।<ref>{{cite web|url=http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/|title=SVG or Canvas? Сhoosing between the two|last=Sucan|first=Mihai|date=4 Feb 2010|publisher=[[Opera Software]]|access-date=3 May 2010|archive-url=https://web.archive.org/web/20100623002104/http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/|archive-date=23 June 2010|url-status=dead}}</ref><ref>{{cite web|url=https://docs.microsoft.com/en-us/microsoft-edge/dev-guide/graphics/canvas|title=Canvas, Microsoft Edge documentation}}</ref>
यह एलिमेंट[[मोज़िला फ़ायरफ़ॉक्स]], [[गूगल क्रोम]], [[इंटरनेट एक्सप्लोरर]], सफारी (वेब ​​ब्राउज़र), [[ विजेता |विजेता]] , ओपेरा (वेब ​​ब्राउज़र) और [[ माइक्रोसॉफ्ट बढ़त |माइक्रोसॉफ्ट]] के वर्तमान संस्करणों द्वारा समर्थित है।<ref>{{cite web|url=http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/|title=SVG or Canvas? Сhoosing between the two|last=Sucan|first=Mihai|date=4 Feb 2010|publisher=[[Opera Software]]|access-date=3 May 2010|archive-url=https://web.archive.org/web/20100623002104/http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/|archive-date=23 June 2010|url-status=dead}}</ref><ref>{{cite web|url=https://docs.microsoft.com/en-us/microsoft-edge/dev-guide/graphics/canvas|title=Canvas, Microsoft Edge documentation}}</ref>
== यह भी देखें ==
== यह भी देखें ==
* [[अनाज विरोधी ज्यामिति|एंटी ग्रेन ज्यामिति]] (एजीजी)
* [[अनाज विरोधी ज्यामिति|एंटी ग्रेन ज्यामिति]] (एजीजी)
Line 107: Line 107:
*[https://developer.mozilla.org/en/Canvas_tutorial Canvas tutorial and introductory page on Mozilla Developer center] {{Webarchive|url=https://web.archive.org/web/20120803112420/https://developer.mozilla.org/en/Canvas_tutorial |date=2012-08-03 }}
*[https://developer.mozilla.org/en/Canvas_tutorial Canvas tutorial and introductory page on Mozilla Developer center] {{Webarchive|url=https://web.archive.org/web/20120803112420/https://developer.mozilla.org/en/Canvas_tutorial |date=2012-08-03 }}


{{DEFAULTSORT:Canvas Element}}[[Category: एचटीएमएल टैग]] [[Category: आप बोर हो जायेंगे]]
{{DEFAULTSORT:Canvas Element}}


 
[[Category:Citation Style 1 templates|M]]
 
[[Category:Collapse templates|Canvas Element]]
[[Category: Machine Translated Page]]
[[Category:Created On 07/07/2023|Canvas Element]]
[[Category:Created On 07/07/2023]]
[[Category:Lua-based templates|Canvas Element]]
[[Category:Vigyan Ready]]
[[Category:Machine Translated Page|Canvas Element]]
[[Category:Navigational boxes| ]]
[[Category:Navigational boxes without horizontal lists|Canvas Element]]
[[Category:Pages with script errors|Canvas Element]]
[[Category:Short description with empty Wikidata description|Canvas Element]]
[[Category:Sidebars with styles needing conversion|Canvas Element]]
[[Category:Template documentation pages|Documentation/doc]]
[[Category:Templates Vigyan Ready|Canvas Element]]
[[Category:Templates based on the Citation/CS1 Lua module|Canvas Element]]
[[Category:Templates generating COinS|Cite magazine]]
[[Category:Templates generating microformats|Canvas Element]]
[[Category:Templates that add a tracking category|Canvas Element]]
[[Category:Templates that are not mobile friendly|Canvas Element]]
[[Category:Templates that generate short descriptions|Canvas Element]]
[[Category:Templates using TemplateData|Canvas Element]]
[[Category:Webarchive template wayback links|Canvas Element]]
[[Category:Wikipedia fully protected templates|Cite magazine]]
[[Category:Wikipedia metatemplates|Canvas Element]]
[[Category:आप बोर हो जायेंगे|Canvas Element]]
[[Category:एचटीएमएल टैग|Canvas Element]]

Latest revision as of 15:37, 11 September 2023

This article is about एचटीएमएल अवयव. For यूजर इंटरफेस में सामान्य अवयव, see कैनवास (जीयूआई).
HTML
Comparisons

कैनवास एलिमेंट एचटीएमएल5 का भाग है और आकार और बिटमैप छवियों के गतिशील, स्क्रिप्टिंग भाषा प्रतिपादन (कंप्यूटर ग्राफिक्स) की अनुमति देता है। यह निम्न स्तरीय, प्रक्रियात्मक मॉडल है जो बिटमैप को अद्यतन करता है। एचटीएमएल5 कैनवस वीडियो गेम ग्राफ़िक्स बनाने में भी सहायता करता है।

जबकि एचटीएमएल5 कैनवास अपनी स्वयं की 2डी ड्राइंग एपीआई प्रदान करता है, यह ओपनजीएल ईएस के साथ 3डी रेंडरिंग की अनुमति देने के लिए वेबजीएल एपीआई का भी समर्थन करता है।

इतिहास

कैनवस को प्रारंभ में 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]

यह भी देखें

संदर्भ

  1. ↑ Ian Hixie (2004-07-12). "HTML का विस्तार". Retrieved 2011-06-13.
  2. ↑ Mozilla Developer Connection. "HTMLCanvasElement". Archived from the original on 2011-06-04. Retrieved 2011-06-13.
  3. ↑ "Opera 9.0 changelog". Archived from the original on 2012-09-10. Retrieved 2006-06-20.
  4. ↑ "Scalable Vector Graphics | CorelDRAW". www.coreldraw.com. Retrieved 2022-09-23.
  5. ↑ Ian Hickson remarks regarding canvas and other Apple extensions to HTML
  6. ↑ "[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.
  7. ↑ Web Applications 1.0 Early Working Draft - Dynamic graphics: The bitmap canvas
  8. ↑ HTML Working Group Patent Policy Status – Known Disclosures
  9. ↑ W3C patent policy in use by HTML working group
  10. ↑ Knibbs, Kate (July 21, 2014). "सबसे गुप्त नए ऑनलाइन ट्रैकिंग टूल के बारे में आपको क्या जानना चाहिए". Gizmodo. Retrieved July 21, 2014.
  11. ↑ Joseph Steinberg (July 23, 2014). "आपको एक गुप्त नई तकनीक द्वारा ऑनलाइन ट्रैक किया जा रहा है - यहां वह है जो आपको जानना आवश्यक है". Forbes. Retrieved November 15, 2014.
  12. ↑ Angwin, Julia (July 21, 2014). "मिलिए उस ऑनलाइन ट्रैकिंग डिवाइस से जिसे ब्लॉक करना लगभग असंभव है". ProPublica. Retrieved July 21, 2014.
  13. ↑ Kirk, Jeremy (July 21, 2014). "गुप्त वेब ट्रैकिंग उपकरण उपयोगकर्ताओं के लिए गोपनीयता जोखिम बढ़ा रहे हैं". PC World. Retrieved July 21, 2014.
  14. ↑ 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.
  15. ↑ 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.
  16. ↑ "Canvas, Microsoft Edge documentation".

बाहरी संबंध

Retrieved from ‘https://www.vigyanwiki.in/index.php?title=कैनवास_एलिमेंट&oldid=256760’