HTML कैनवास की fillStyle() प्रॉपर्टी का उपयोग ड्राइंग के लिए रंग या ग्रेडिएंट या पैटर्न सेट करने के लिए किया जाता है। डिफ़ॉल्ट #000000 है। <कैनवास> तत्व आपको जावास्क्रिप्ट का उपयोग करके वेब पेज पर ग्राफिक्स बनाने की अनुमति देता है। प्रत्येक कैनवास में दो तत्व होते हैं जो कैनवास की ऊंचाई और चौड़ाई का वर्णन करते हैं अर्थात क्रमशः ऊंचाई और चौड़ाई।
निम्नलिखित वाक्य रचना है -
ctx.fillStyle=color|gradient|pattern;
ऊपर, मानों में शामिल हैं -
- रंग: आरेखण का भरण रंग, जो एक CSS रंग है।
- ढाल: ड्राइंग को भरने के लिए रैखिक या रेडियल ग्रेडिएंट ऑब्जेक्ट
- पैटर्न: ड्राइंग को भरने के लिए पैटर्न ऑब्जेक्ट।
आइए अब कैनवास की fillStyle() प्रॉपर्टी को लागू करने के लिए एक उदाहरण देखें -
उदाहरण
<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="500" height="350" style="border:2px solid orange;">
</canvas>
<script>
var c = document.getElementById("newCanvas");
var ctx = c.getContext("2d");
var newGrad =ctx.createLinearGradient(0, 0, 130, 0);
newGrad.addColorStop(0, "blue");
newGrad.addColorStop(0.8, "green");
ctx.fillStyle = newGrad;
ctx.fillRect(0, 0, 500, 350);
</script>
</body>
</html> आउटपुट
