เมธอดนี้ส่งคืนอ็อบเจ็กต์ 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> 