HTML 캔버스에서 행렬(Matrix) 변환으로 JS 방사형 그라디언트 만들기

HTML5 캔버스(Canvas)에서는 createRadialGradient() 메서드를 사용해 부드러운 방사형 그라디언트를 손쉽게 만들 수 있습니다. 여기에 scale(), setTransform() 같은 행렬(Matrix) 변환 기법을 함께 적용하면 원형 그라디언트를 가로·세로로 늘리거나 줄여 타원형 등 다양한 형태로 응용할 수 있습니다.

핵심 메서드 이해하기

createRadialGradient(x0, y0, r0, x1, y1, r1)

시작 원과 끝 원, 두 개의 원을 정의해 그 사이를 부드럽게 채우는 방사형 그라디언트 객체를 생성합니다. 각 원의 중심 좌표와 반지름을 인자로 전달하며, 반환된 객체를 fillStyle에 지정해 사용합니다.

addColorStop(offset, color)

그라디언트에 색상을 추가하는 메서드입니다. offset은 0(그라디언트 시작점)부터 1(끝점) 사이의 값으로 위치를 지정하고, color에는 CSS 색상 값을 넣습니다.

scale(horizontalScale, verticalScale)

캔버스 컨텍스트의 좌표계를 가로·세로 방향으로 확대하거나 축소하는 행렬 변환 메서드입니다. 적용한 뒤 도형을 그리면 지정한 비율만큼 늘어나거나 줄어든 상태로 출력됩니다.

setTransform(a, b, c, d, e, f)

현재 컨텍스트의 변환 행렬을 새로운 행렬로 완전히 교체합니다. 누적된 scale, rotate 등의 변환을 한 번에 재설정할 때 유용합니다.

전체 예제 코드

아래 코드를 실행하면 보라색 배경 위에 빨강 → 초록으로 변하는 방사형 그라디언트가 행렬 변환과 함께 그려집니다.

<!DOCTYPE html>
<html>
<head>
<style>
  canvas {
    background-color: purple; /* 캔버스 배경색을 보라색으로 지정 */
  }
</style>
</head>
<body>

<canvas id="canvas" width="300" height="300"></canvas>

<script>
  // 가로·세로 스케일 값 설정
  var horizontalScale = 2;
  var verticalScale = 1;

  // 캔버스 요소를 가져오고 2D 드로잉 컨텍스트를 얻음
  var canvas1 = document.getElementById("canvas");
  var ctx1 = canvas1.getContext("2d");

  // 방사형 그라디언트 생성 (스케일을 고려해 좌표를 나눠줌)
  var gradient1 = ctx1.createRadialGradient(
    100 / horizontalScale, 100 / verticalScale, 100,
    100 / horizontalScale, 100 / verticalScale, 0
  );

  // 그라디언트에 색상 추가
  gradient1.addColorStop(1, "green"); // 바깥쪽은 초록색
  gradient1.addColorStop(0, "red");   // 안쪽은 빨간색

  // 컨텍스트 행렬을 가로·세로 스케일에 맞춰 변환
  ctx1.scale(horizontalScale, verticalScale);

  // 그라디언트를 채우기 스타일로 지정하고 사각형을 그림
  ctx1.fillStyle = gradient1;
  ctx1.fillRect(0, 0, 100 / horizontalScale, 100 / verticalScale);

  // 변환된 컨텍스트 행렬을 재설정
  ctx1.setTransform(0, 1, 1, 0, 1, 1);
</script>

</body>
</html>

코드 동작 순서

캔버스 준비: getElementById()로 캔버스 요소를 가져온 뒤 getContext("2d")로 2D 드로잉 컨텍스트를 얻습니다.
그라디언트 생성: createRadialGradient()로 두 원을 정의한 방사형 그라디언트를 만듭니다. 이때 스케일 값으로 나눈 좌표를 사용해, 이후 행렬 변환이 적용되어도 의도한 위치에 그려지도록 합니다.
색상 지정: addColorStop()으로 안쪽은 빨간색, 바깥쪽은 초록색을 지정합니다.
행렬 변환 적용: scale()로 컨텍스트 좌표계를 변환한 후 fillRect()로 사각형을 그리면, 그라디언트가 스케일 비율에 맞춰 늘어나거나 줄어든 형태로 표현됩니다.
행렬 재설정: 마지막에 setTransform()으로 변환 행렬을 교체해, 이후 그리기 작업에 이전 변환이 영향을 주지 않도록 합니다.

마무리

이처럼 createRadialGradient()와 행렬 변환 메서드를 조합하면 단순한 원형 그라디언트를 넘어, 늘어난 타원형 그라디언트나 기울어진 그라디언트까지 자유롭게 구현할 수 있습니다. 버튼 배경, 조명 효과, 데이터 시각화 등 다양한 UI 요소에 활용해 보세요.