यह विधि एक CanvasGradient ऑब्जेक्ट लौटाती है जो एक रैखिक ग्रेडिएंट का प्रतिनिधित्व करती है जो तर्कों द्वारा दर्शाए गए निर्देशांक द्वारा दी गई रेखा के साथ पेंट करती है। चार तर्क ग्रेडिएंट के शुरुआती बिंदु (x1,y1) और अंतिम बिंदु (x2,y2) का प्रतिनिधित्व करते हैं।
createLinearGradient(x0, y0, x1, y1)
यहां createLinearGradient() विधि के पैरामीटर मान दिए गए हैं -
| S.No <वें शैली ="चौड़ाई:92.03%; पाठ-संरेखण:केंद्र;"> पैरामीटर और विवरण | |
|---|---|
| 1 | x0 x-निर्देशांक- ढाल का प्रारंभिक बिंदु |
| 2 | y0 y- निर्देशांक - ढाल का प्रारंभिक बिंदु |
| 3 | X1 x-निर्देशांक - ग्रेडिएंट का अंतिम बिंदु |
| 4 | y1 y- निर्देशांक - ग्रेडिएंट का अंतिम बिंदु |
उदाहरण
HTML5 में एक रेखीय ग्रेडिएंट कैसे बनाएं, यह जानने के लिए आप निम्न कोड को चलाने का प्रयास कर सकते हैं -
<!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>