createRadialGradient() मेथड
रेडियल (वृत्ताकार) ग्रेडिएंट बनाने के लिए Canvas API का createRadialGradient(x0, y0, r0, x1, y1, r1) मेथड उपयोग करें। पहले तीन पैरामीटर्स शुरुआती सर्कल (x0,y0,r0) और अगले तीन अंतिम सर्कल (x1,y1,r1) डिफाइन करते हैं।
पैरामीटर्स:
| क्र.सं. | पैरामीटर और विवरण |
|---|---|
| 1 | x0 - शुरुआती ग्रेडिएंट का X निर्देशांक |
| 2 | y0 - शुरुआती ग्रेडिएंट का Y निर्देशांक |
| 3 | r0 - शुरुआती सर्कल की त्रिज्या |
| 4 | x1 - अंतिम ग्रेडिएंट का X निर्देशांक |
| 5 | y1 - अंतिम ग्रेडिएंट का Y निर्देशांक |
| 6 | r1 - अंतिम सर्कल की त्रिज्या |
उदाहरण
<!DOCTYPE html> <html>
<head> <title>HTML5 Radial 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.createRadialGradient(75, 50, 5, 90, 60, 100);
linegrd.addColorStop(0, "#FFFFFF");
linegrd.addColorStop(1, "#66CC00");
ctxt.fillStyle = linegrd;
ctxt.fillRect(20, 10, 200, 150);
</script>
</body>
</html>
