HTML कैनवास में strokeStyle प्रॉपर्टी का उपयोग स्ट्रोक के लिए रंग, ग्रेडिएंट या पैटर्न सेट करने के लिए किया जाता है। <canvas> एलिमेंट आपको JavaScript का उपयोग करके वेब पेज पर ग्राफिक्स ड्रॉ करने की अनुमति देता है। हर कैनवास में दो एलिमेंट्स होते हैं जो कैनवास की ऊंचाई और चौड़ाई का वर्णन करते हैं यानी क्रमशः height और width।
निम्नलिखित सिंटैक्स है:
context.strokeStyle=color|gradient|pattern;
उपरोक्त मानों में शामिल हैं:
- color − ड्राइंग का स्ट्रोक रंग।
- gradient − ग्रेडिएंट स्ट्रोक बनाने के लिए लीनियर या रेडियल ग्रेडिएंट ऑब्जेक्ट।
- pattern − पैटर्न स्ट्रोक बनाने के लिए पैटर्न ऑब्जेक्ट।
आइए अब कैनवास के strokeStyle प्रॉपर्टी को लागू करने का एक उदाहरण देखें:
उदाहरण
<!DOCTYPE html> <html> <body> <canvas id="newCanvas" width="550" height="400" style="border −2px solid orange;"></canvas> <script> var c = document.getElementById("newCanvas"); var ctx = c.getContext("2d"); var grad = ctx.createLinearGradient(150, 0, 280, 0); grad.addColorStop("0", "orange"); grad.addColorStop("0.5", "blue"); grad.addColorStop("1.0", "green"); ctx.strokeStyle = grad; ctx.lineWidth = 20; ctx.strokeRect(150, 120, 240, 100); </script> </body> </html>
आउटपुट
