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