Phương thức này trả về một đối tượng CanvasGradient đại diện cho một gradient xuyên tâm vẽ dọc theo hình nón được cung cấp bởi các vòng tròn được đại diện bởi các đối số. Ba đối số đầu tiên xác định đường tròn có tọa độ (x1, y1) và bán kính r1 và đối số thứ hai là đường tròn có tọa độ (x2, y2) và bán kính r2.
createRadialGradient(x0, y0, r0, x1, y1, r1)
Đây là các giá trị tham số của phương thức createRadialGradient () -
| S.Không | Thông số &Mô tả |
|---|---|
| 1 | x0 x-toạ độ- Điểm bắt đầu của gradient |
| 2 | y0 y- tọa độ - Điểm bắt đầu của gradient |
| 3 | r0 Bán kính của vòng tròn bắt đầu |
| 4 | x1 tọa độ x - Điểm kết thúc của gradient |
| 5 | y1 y- tọa độ - Điểm kết thúc của gradient |
| 6 | r1 Bán kính của vòng tròn kết thúc |
Bạn có thể thử chạy đoạn mã sau để tìm hiểu cách vẽ gradient xuyên tâm / tròn 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>