이 메서드는 인수로 표시되는 원으로 지정된 원뿔을 따라 그리는 방사형 그래디언트를 나타내는 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>