HTML5의 캔버스(Canvas)에서 선형 그라디언트를 만들려면 createLinearGradient() 메서드를 사용합니다. 이 메서드는 지정한 좌표로 정의된 선을 따라 칠해지는 선형 그라디언트를 나타내는 CanvasGradient 객체를 반환합니다.
네 개의 인수는 각각 그라디언트의 시작점(x0, y0)과 끝점(x1, y1)을 의미합니다.
createLinearGradient(x0, y0, x1, y1)
createLinearGradient() 메서드의 매개변수
| 번호 | 매개변수 및 설명 |
|---|---|
| 1 | x0 — 그라디언트 시작점의 x좌표 |
| 2 | y0 — 그라디언트 시작점의 y좌표 |
| 3 | x1 — 그라디언트 끝점의 x좌표 |
| 4 | y1 — 그라디언트 끝점의 y좌표 |
색상 중지점 추가하기
그라디언트 객체를 생성한 후에는 addColorStop() 메서드를 사용하여 색상 중지점(color stop)을 추가해야 합니다. 첫 번째 인수는 0(시작)부터 1(끝) 사이의 위치 값을, 두 번째 인수는 해당 위치에 적용할 색상을 받습니다.
linegrd.addColorStop(0.5, "#E44D26"); linegrd.addColorStop(1, "#66CC00");
예제 코드
다음 코드를 실행하면 HTML5 캔버스에서 선형 그라디언트가 어떻게 그려지는지 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Linear 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.createLinearGradient(0, 0, 170, 0);
linegrd.addColorStop(0.5, "#E44D26");
linegrd.addColorStop(1, "#66CC00");
ctxt.fillStyle = linegrd;
ctxt.fillRect(50, 80, 300, 100);
</script>
</body>
</html>코드 설명
위 예제의 동작 순서는 다음과 같습니다.
먼저 getContext("2d")로 2D 렌더링 컨텍스트를 가져옵니다. 그다음 createLinearGradient(0, 0, 170, 0)을 호출하여 왼쪽 상단(0, 0)에서 오른쪽(170, 0)으로 진행되는 수평 방향의 그라디언트를 생성합니다.
addColorStop()으로 주황색(#E44D26)과 초록색(#66CC00) 두 개의 색상 중지점을 지정한 뒤, 이 그라디언트 객체를 fillStyle에 할당하고 fillRect()로 사각형을 채우면 부드럽게 전환되는 선형 그라디언트가 화면에 나타납니다.