वेब पेज पर कैनवास बनाने के लिए, HTML5 कैनवास तत्व का उपयोग करें। <कैनवास> तत्व आपको जावास्क्रिप्ट का उपयोग करके ग्राफिक्स बनाने की अनुमति देता है। कैनवास के साथ, एक रेखा, आयत, बेज़ियर वक्र, आदि बनाएं।
प्रत्येक कैनवास में दो तत्व होते हैं जो कैनवास की ऊंचाई और चौड़ाई का वर्णन करते हैं अर्थात क्रमशः ऊंचाई और चौड़ाई।
इसके साथ, आपको कैनवास के लिए एक आईडी भी सेट करनी होगी जैसा कि नीचे दिए गए कोड स्निपेट में दिखाया गया है -
<कैनवास आईडी ="नया कैनवास" चौड़ाई ="100" ऊंचाई ="100">getElementById() विधि का उपयोग करके उस <कैनवास> तत्व को DOM में खोजें -
var कैनवास =document.getElementById("newCanvas");कैनवास पर कुछ प्रदर्शित करने के लिए, एक स्क्रिप्ट को पहले प्रतिपादन संदर्भ तक पहुंचने और उस पर आकर्षित करने की आवश्यकता होती है। <कैनवास> में एक DOM मेथड है जिसे getContext कहा जाता है ताकि रेंडरिंग कॉन्टेक्स्ट और इसके ड्रॉइंग फंक्शन को प्राप्त किया जा सके। यह फ़ंक्शन एक पैरामीटर लेता है, संदर्भ2d का प्रकार।
आइए अब
. के साथ HTML5 में पथ बनाने के लिए एक उदाहरण देखेंउदाहरण
<कैनवास id ="mycanvas">आउटपुट
यह निम्नलिखित आउटपुट देगा -
आइए HTML5 में द्विघात वक्र बनाने के लिए एक और उदाहरण देखें -
उदाहरण
<कैनवास id ="mycanvas">आउटपुट
यह निम्नलिखित आउटपुट देगा -
