HTML में canvas टैग का उपयोग ग्राफिक्स ड्रॉ करने के लिए किया जाता है। ग्राफिक्स ड्रॉ करने के लिए, आपको स्क्रिप्ट का उपयोग करने की आवश्यकता होती है। यह टैग HTML5 में पेश किया गया था। हर कैनवास में दो एलिमेंट्स होते हैं जो कैनवास की ऊंचाई और चौड़ाई का वर्णन करते हैं यानी क्रमशः height और width।
निम्नलिखित एट्रिब्यूट्स हैं:
- height − कैनवास की ऊंचाई पिक्सेल में
- width − कैनवास की चौड़ाई पिक्सेल में
आइए अब HTML में canvas टैग को लागू करने का एक उदाहरण देखें:
उदाहरण
<!DOCTYPE html> <html> <body> <canvas id="newCanvas" width="600" height="350" style="border −2px solid orange;"> </canvas> <script> var c = document.getElementById("newCanvas"); var ctx = c.getContext("2d"); ctx.shadowBlur = 20; ctx.shadowColor = "black"; ctx.fillStyle = "green"; ctx.fillRect(40, 40, 100, 250); ctx.shadowBlur = 30; ctx.shadowColor = "blue"; ctx.fillStyle = "orange"; ctx.fillRect(200, 40, 200, 150); </script> </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('You need Safari or Firefox 1.5+ to see this demo.'); } } </script> </head> <body id = "test" onload = "drawShape();"> <canvas id = "mycanvas"></canvas> </body> </html>
आउटपुट
