এই মেথড একটি CanvasGradient অবজেক্ট রিটার্ন করে যা একটি র্যাডিয়াল গ্রেডিয়েন্টকে প্রতিনিধিত্ব করে যা আর্গুমেন্ট্স দ্বারা প্রতিনিধিত্ব করা সার্কেলগুলো দ্বারা দেওয়া কোনের সাথে সাথে পেইন্ট করে। প্রথম তিনটি আর্গুমেন্ট (x1,y1) কোঅর্ডিনেটস এবং r1 রেডিয়াস সহ একটি সার্কেল ডিফাইন করে এবং দ্বিতীয়টি (x2,y2) কোঅর্ডিনেটস এবং r2 রেডিয়াস সহ একটি সার্কেল ডিফাইন করে।
createRadialGradient(x0, y0, r0, x1, y1, r1)
createRadialGradient() মেথডের প্যারামিটার ভ্যালুগুলো নিচে দেওয়া হলো:
| S.No | প্যারামিটার ও বর্ণনা |
|---|---|
| 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>
