createLinearGradient() मेथड
लीनियर (रैखिक) ग्रेडिएंट बनाने के लिए Canvas API का createLinearGradient(x0, y0, x1, y1) मेथड उपयोग करें। चार पैरामीटर्स शुरुआती बिंदु (x0,y0) और अंतिम बिंदु (x1,y1) डिफाइन करते हैं।
पैरामीटर्स:
| क्र.सं. | पैरामीटर और विवरण |
|---|---|
| 1 | x0 - शुरुआती ग्रेडिएंट का X निर्देशांक |
| 2 | y0 - शुरुआती ग्रेडिएंट का Y निर्देशांक |
| 3 | x1 - अंतिम ग्रेडिएंट का X निर्देशांक |
| 4 | y1 - अंतिम ग्रेडिएंट का Y निर्देशांक |
उदाहरण
<!DOCTYPE html> <html>
<head> <title>HTML5 Linear Gradient</title> </head>
<body>
<canvas id="newCanvas" width="450" height="250" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("newCanvas");
var ctxt = c.getContext("2d");
var linegrd = ctxt.createLinearGradient(0, 0, 170, 0);
linegrd.addColorStop(0.5, "#E44D26");
linegrd.addColorStop(1, "#66CC00");
ctxt.fillStyle = linegrd;
ctxt.fillRect(50, 80, 300, 100);
</script>
</body>
</html>
