HTML5에서 원형 그라디언트란?
HTML5의 Canvas API에서 createRadialGradient() 메서드는 두 개의 원으로 정의되는 원뿔형 영역을 따라 색상이 부드럽게 변하는 방사형(원형) 그라디언트를 표현하는 CanvasGradient 객체를 반환합니다.
이 메서드는 총 6개의 인수를 받으며, 처음 세 개의 인수는 좌표 (x0, y0)와 반지름 r0로 시작 원을 정의하고, 나머지 세 개의 인수는 좌표 (x1, y1)와 반지름 r1로 끝 원을 정의합니다.
createRadialGradient() 기본 문법
createRadialGradient(x0, y0, r0, x1, y1, r1)
매개변수 설명
createRadialGradient() 메서드의 각 매개변수는 다음과 같습니다.
| 번호 | 매개변수 및 설명 |
|---|---|
| 1 | x0 — 그라디언트 시작 지점의 x좌표 |
| 2 | y0 — 그라디언트 시작 지점의 y좌표 |
| 3 | r0 — 시작 원의 반지름 |
| 4 | x1 — 그라디언트 끝 지점의 x좌표 |
| 5 | y1 — 그라디언트 끝 지점의 y좌표 |
| 6 | r1 — 끝 원의 반지름 |
색상 중간 지점 추가하기
그라디언트 객체를 생성한 후에는 addColorStop() 메서드를 사용해 색상 전환 지점을 지정해야 합니다. 첫 번째 인수는 0(그라디언트 시작)부터 1(그라디언트 끝) 사이의 위치 값이며, 두 번째 인수는 해당 위치에 적용할 색상입니다.
예제 코드
아래 예제 코드를 실행하면 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>코드 동작 방식
위 코드의 실행 흐름은 다음과 같습니다.
먼저 getElementById()로 캔버스 요소를 가져오고, getContext("2d")를 통해 2D 드로잉 컨텍스트를 얻습니다. 이후 createRadialGradient(75, 50, 5, 90, 60, 100)로 시작 원(중심 75,50 / 반지름 5)과 끝 원(중심 90,60 / 반지름 100)을 정의합니다.
색상 정지점으로는 중심부에 흰색(#FFFFFF), 바깥쪽에 초록색(#66CC00)을 지정하여 중심에서 바깥으로 갈수록 흰색에서 초록색으로 자연스럽게 변하는 효과를 만듭니다. 마지막으로 fillStyle에 그라디언트를 할당하고 fillRect()로 사각형 영역을 채우면 방사형 그라디언트가 화면에 나타납니다.