Canvas fillStyle प्रॉपर्टी
fillStyle प्रॉपर्टी HTML Canvas पर ड्राइंग के लिए भराव रंग, ग्रेडिएंट, या पैटर्न सेट करती है। डिफ़ॉल्ट #000000 (काला) है। यह fill(), fillRect(), fillText() को प्रभावित करती है।
सिंटैक्स
ctx.fillStyle = color | gradient | pattern;
मान
- color: CSS रंग (नाम, हेक्स, RGB, RGBA, HSL, HSLA)
- gradient:
createLinearGradient()याcreateRadialGradient()ऑब्जेक्ट - pattern:
createPattern()ऑब्जेक्ट
उदाहरण: रैखिक ग्रेडिएंट भराव
<!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>
आउटपुट
बाएं से दाएं नीले से हरे रंग का रैखिक ग्रेडिएंट भरा कैनवास।
ग्रेडिएंट प्रकार
रैखिक ग्रेडिएंट
var grad = ctx.createLinearGradient(x0, y0, x1, y1); grad.addColorStop(0, "red"); grad.addColorStop(0.5, "yellow"); grad.addColorStop(1, "blue");
त्रिज्यीय ग्रेडिएंट
var grad = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1); grad.addColorStop(0, "white"); grad.addColorStop(1, "black");
पैटर्न भराव
var img = new Image();
img.src = "pattern.png";
img.onload = function() {
var pattern = ctx.createPattern(img, "repeat"); // repeat, repeat-x, repeat-y, no-repeat
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 300, 200);
};
