Phương thức này trả về đối tượng CanvasGradient đại diện cho gradient đường kính (radial) tô màu theo hình nón do các đường tròn tham số xác định. Ba tham số đầu định nghĩa đường tròn tọa độ (x1,y1) bán kính r1 và thứ hai đường tròn tọa độ (x2,y2) bán kính r2.
createRadialGradient(x0, y0, r0, x1, y1, r1)
Các tham số của createRadialGradient():
| STT | Tham số & Mô tả |
|---|---|
| 1 | x0 - Tọa độ x - Điểm bắt đầu gradient |
| 2 | y0 - Tọa độ y - Điểm bắt đầu gradient |
| 3 | r0 - Bán kính đường tròn bắt đầu |
| 4 | x1 - Tọa độ x - Điểm kết thúc gradient |
| 5 | y1 - Tọa độ y - Điểm kết thúc gradient |
| 6 | r1 - Bán kính đường tròn kết thúc |
Chạy mã sau để học cách vẽ gradient tròn/đường kính trong 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>