वेब पेज पर कैनवास ड्रा करने के लिए, HTML5 canvas एलिमेंट का उपयोग करें। <canvas> एलिमेंट आपको JavaScript का उपयोग करके ग्राफिक्स ड्रा करने की अनुमति देता है। Canvas के साथ, एक लाइन, आयत, बेजियर कर्व्स आदि ड्रा करें।
हर कैनवास के दो एलिमेंट्स होते हैं जो कैनवास की ऊंचाई और चौड़ाई का वर्णन करते हैं यानी height और width क्रमशः।
इसके साथ, आपको नीचे दिए गए कोड स्निपेट में दिखाए अनुसार कैनवास के लिए एक id सेट करने की भी आवश्यकता है:
<canvas id = "newCanvas" width = "100" height = "100"></canvas>
getElementById() मेथड का उपयोग करके DOM में उस <canvas> एलिमेंट को खोजें:
var canvas = document.getElementById("newCanvas");
कैनवास पर कुछ प्रदर्शित करने के लिए, एक स्क्रिप्ट को पहले रेंडरिंग कॉन्टेक्स्ट को एक्सेस करने और उस पर ड्रा करने की आवश्यकता होती है। <canvas> में getContext नामक एक DOM मेथड होता है जिसका उपयोग रेंडरिंग कॉन्टेक्स्ट और इसके ड्राइंग फंक्शन्स को प्राप्त करने के लिए किया जाता है। यह फंक्शन एक पैरामीटर लेता है, कॉन्टेक्स्ट टाइप 2d।
आइए अब <canvas> के साथ HTML5 में पाथ ड्रा करने का एक उदाहरण देखते हैं:
उदाहरण
<!DOCTYPE HTML> <html> <head> <style> #test { width: 100px; height:100px; margin: 0px auto; background-color: orange; } </style> <script> function drawShape() { // DOM का उपयोग करके कैनवास एलिमेंट प्राप्त करें var canvas = document.getElementById('mycanvas'); // सुनिश्चित करें कि हम तब एक्जीक्यूट न करें जब कैनवास सपोर्टेड न हो if (canvas.getContext) { // ड्राइंग के लिए कैनवास का उपयोग करने के लिए getContext का उपयोग करें var ctx = canvas.getContext('2d'); // आकृतियाँ ड्रा करें ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); // बाहरी सर्कल ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // मुंह ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); // बाईं आंख ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); // दाईं आंख ctx.stroke(); } else { alert('इस डेमो को देखने के लिए आपको Safari या Firefox 1.5+ की आवश्यकता है।'); } } </script> </head> <body id = "test" onload = "drawShape();"> <canvas id = "mycanvas"></canvas> </body> </html>
आउटपुट
यह निम्न आउटपुट देगा:
आइए HTML5 में एक क्वाड्रेटिक कर्व ड्रा करने का एक और उदाहरण देखते हैं:
उदाहरण
<!DOCTYPE HTML> <html> <head> <style> #test { width: 100px; height:100px; margin: 0px auto; } </style> <script type> function drawShape() { // DOM का उपयोग करके कैनवास एलिमेंट प्राप्त करें var canvas = document.getElementById('mycanvas'); // सुनिश्चित करें कि हम तब एक्जीक्यूट न करें जब कैनवास सपोर्टेड न हो if (canvas.getContext) { // ड्राइंग के लिए कैनवास का उपयोग करने के लिए getContext का उपयोग करें var ctx = canvas.getContext('2d'); // आकृतियाँ ड्रा करें ctx.beginPath(); ctx.moveTo(75,25); ctx.quadraticCurveTo(25,25,25,62.5); ctx.quadraticCurveTo(25,100,50,100); ctx.quadraticCurveTo(50,120,30,125); ctx.quadraticCurveTo(60,120,65,100); ctx.quadraticCurveTo(125,100,125,62.5); ctx.quadraticCurveTo(125,25,75,25); ctx.stroke(); } else { alert('इस डेमो को देखने के लिए आपको Safari या Firefox 1.5+ की आवश्यकता है।'); } } </script> </head> <body id = "test" onload = "drawShape();"> <canvas id = "mycanvas"></canvas> </body> </html>
आउटपुट
यह निम्न आउटपुट देगा:
