एचटीएमएल 5 - कैनवस

HTML5 तत्व <कैनवास> आपको जावास्क्रिप्ट का उपयोग करके ग्राफिक्स बनाने का एक आसान और शक्तिशाली तरीका देता है। इसका उपयोग ग्राफ खींचने, फोटो रचनाएं बनाने या सरल (और इतना सरल नहीं) एनिमेशन करने के लिए किया जा सकता है।

यहां एक सरल <कैनवास> तत्व है जिसमें केवल दो विशिष्ट विशेषताएं हैं width तथा height प्लस सभी कोर HTML5 विशेषताओं जैसे आईडी, नाम और वर्ग, आदि।

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

आप आसानी से पा सकते हैं कि <कैनवास> DOM में तत्व getElementById () विधि निम्नानुसार है -

var canvas = document.getElementById("mycanvas");

एचटीएमएल 5 दस्तावेज़ में <कैनवास> तत्व का उपयोग करने पर एक सरल उदाहरण देखें।

<!DOCTYPE HTML>

<html>
   <head>
   
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

प्रतिपादन प्रसंग

<कैनवास> शुरू में रिक्त है, और कुछ प्रदर्शित करने के लिए, एक स्क्रिप्ट को पहले प्रतिपादन संदर्भ तक पहुंचने और उस पर आकर्षित करने की आवश्यकता है।

कैनवास तत्व में एक DOM विधि होती है जिसे कहा जाता है getContext, प्रतिपादन संदर्भ और उसके ड्राइंग कार्यों को प्राप्त करने के लिए उपयोग किया जाता है। यह फ़ंक्शन एक पैरामीटर लेता है, संदर्भ का प्रकार2d।

यदि आपका ब्राउज़र <कैनवास> तत्व का समर्थन करता है, तो चेक के साथ आवश्यक संदर्भ प्राप्त करने के लिए कोड निम्नलिखित है -

var canvas  = document.getElementById("mycanvas");

if (canvas.getContext) {   
   var ctx = canvas.getContext('2d');   
   // drawing code here   
} else {   
   
   // canvas-unsupported code here 
}

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

फ़ायरफ़ॉक्स, सफारी, क्रोम और ओपेरा के नवीनतम संस्करण एचटीएमएल 5 कैनवस के लिए सभी समर्थन करते हैं, लेकिन IE8 मूल रूप से कैनवास का समर्थन नहीं करता है।

Internet Explorer के माध्यम से कैनवास का समर्थन करने के लिए आप ExplorerCanvas का उपयोग कर सकते हैं । आपको इस जावास्क्रिप्ट को इस प्रकार शामिल करना होगा -

<!--[if IE]><script src = "excanvas.js"></script><![endif]-->

एचटीएमएल 5 कैनवस उदाहरण

यह ट्यूटोरियल HTML5 <कैनवास> तत्व से संबंधित निम्नलिखित उदाहरणों को शामिल करता है।

अनु क्रमांक।	उदाहरण और विवरण
1	रेक्टैंगल्स ड्राइंग HTML5 <कैनवास> तत्व का उपयोग करके आयत बनाने का तरीका जानें
2	ड्राइंग पथ एचटीएमएल 5 <कैनवास> तत्व में पथों का उपयोग करके आकार बनाना सीखें
3	रेखाएँ खींचना एचटीएमएल 5 <कैनवास> तत्व का उपयोग करके लाइनें आकर्षित करना सीखें
4	ड्राइंग बेज़ियर एचटीएमएल 5 <कैनवास> तत्व का उपयोग करके बेजियर कर्व को आकर्षित करना सीखें
5	चतुर्भुज रेखाचित्र HTML5 <कैनवास> तत्व का उपयोग करके द्विघात वक्र आकर्षित करना सीखें
6	छवियों का उपयोग करना एचटीएमएल 5 <कैनवास> तत्व के साथ छवियों का उपयोग करना सीखें
7	ग्रेड बनाएं एचटीएमएल 5 <कैनवास> तत्व का उपयोग करके ग्रेडिएंट बनाने का तरीका जानें
8	शैलियाँ और रंग HTML5 <कैनवास> तत्व का उपयोग करके शैलियों और रंगों को लागू करना सीखें
9	पाठ और फ़ॉन्ट्स विभिन्न फ़ॉन्ट और उनके आकार का उपयोग करके अद्भुत पाठ आकर्षित करना सीखें।
10	पैटर्न और छाया जानें कि विभिन्न पैटर्न कैसे बनाएं और छाया को कैसे छोड़ें।
1 1	कैनवस स्टेट्स एक कैनवास पर जटिल चित्र बनाते समय कैनवास को बचाने और पुनर्स्थापित करने का तरीका जानें।
12	कैनवास अनुवाद इस विधि का उपयोग कैनवास और उसके मूल को ग्रिड में एक अलग बिंदु पर ले जाने के लिए किया जाता है।
13	कैनवस रोटेशन इस पद्धति का उपयोग वर्तमान मूल के चारों ओर कैनवास को घुमाने के लिए किया जाता है।
14	कैनवस स्केलिंग इस पद्धति का उपयोग कैनवास ग्रिड में इकाइयों को बढ़ाने या घटाने के लिए किया जाता है।
15	कैनवस ट्रांसफ़ॉर्म ये विधियां रूपांतरण मैट्रिक्स में सीधे संशोधन की अनुमति देती हैं।
16	कैनवास रचना इस पद्धति का उपयोग कैनवास से कुछ क्षेत्रों या स्पष्ट वर्गों को बंद करने के लिए किया जाता है।
17	कैनवास एनीमेशन HTML5 कैनवास और जावास्क्रिप्ट का उपयोग करके बुनियादी एनीमेशन बनाने का तरीका जानें।