HTML5 कैनवास ड्रॉइंग्स के चारों ओर अच्छी छाया बनाने की क्षमता प्रदान करता है। सभी ड्राइंग ऑपरेशन चार ग्लोबल शैडो एट्रिब्यूट्स से प्रभावित होते हैं।
| क्र.सं. | प्रॉपर्टी और विवरण |
|---|---|
| 1 | shadowColor [ = value ] यह प्रॉपर्टी वर्तमान शैडो कलर लौटाती है और इसे सेट किया जा सकता है, शैडो कलर बदलने के लिए। |
| 2 | shadowOffsetX [ = value ] यह प्रॉपर्टी वर्तमान शैडो ऑफसेट X लौटाती है और इसे सेट किया जा सकता है, शैडो ऑफसेट X बदलने के लिए। |
| 3 | shadowOffsetY [ = value ] यह प्रॉपर्टी वर्तमान शैडो ऑफसेट Y लौटाती है और इसे सेट किया जा सकता है, शैडो ऑफसेट Y बदलने के लिए। |
| 4 | shadowBlur [ = value ] यह प्रॉपर्टी शैडो पर लागू वर्तमान ब्लर स्तर को लौटाती है और इसे सेट किया जा सकता है, ब्लर स्तर बदलने के लिए। |
उदाहरण
छाया बनाने के लिए आप निम्न कोड आज़मा सकते हैं:
<!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.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 2; ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; ctx.font = "20px Times New Roman"; ctx.fillStyle = "Black"; ctx.fillText("This is shadow test", 5, 30); } else { alert('इस डेमो को देखने के लिए आपको Safari या Firefox 1.5+ चाहिए।'); } } </script> </head> <body id = "test" onload = "drawShape();"> <canvas id = "mycanvas"></canvas> </body> </html>
