[그래픽 처리] 그라데이션(gradation)/createLinearGradient()/CreateRadialGradient()

[그래픽 처리] 그라데이션(gradation)/createLinearGradient()/CreateRadialGradient()

[1] 선형 그라데이션 - createLinearGradient()

선형 그라데이션은 왼쪽에서 오른쪽(혹은 아래에서 위)으로 갈수록 점점 색이 변화하는 그라데이션을 말합니다.
createLinearGradient() 메서드를 사용해 지정할 수 있습니다.
addColorStop() 메서드의 첫 번째 인수인 시작 지점에 0~1.0까지의 실수를 지정하여, 어느 지점에 어떤 색을 표시할 것인지를 지정합니다.

//CanvasGradient 객체 만듬
CanvasGradient = ctx.createLinearGradient(x1, y1. x2, y2)
//그라데이션 색 추가
CanvasGradient.addColorStop(시작지점, 색)

 

 

 

g.addColorStop(시작지점, 색)만 추가 해주면 3단 그라데이션도 가능합니다.
시작지점의 인수는 0~1.0까지의 실수라는 것을 명심해 두세요. 
시작지점의 인수란 말은 색이 시작하는 지점의 인수를 뜻합니다.
아래의 코드에서 빨강의 시작지점 인수는 0이므로 범위의 제일 오른쪽 부분에 빨강색이 시작되고,
노랑은 범위의 3/10지점, 남색은 8/10지점에서 부터 색이 시작됩니다. 

 

 

 

왼쪽 위에서 오른쪽 아래로 그라데이션을 적용해보겠습니다.
g = ctx.createLinearGradient(x1, y1. x2, y2) 에서 y2 좌표를 변경하니 적용되었습니다.

 

 

 

[2] 원형 그라데이션 - CreateRadialGradient()

원형 그라데이션이은 원의 중심으로부터 외각으로 갈수록 서서히 색이 변화하는 것을 말합니다.
createRadialGradient() 메서드를 사용해 객체를 만들고 addColorStop() 메서드로 그라데이션 색을 지정해줍니다.

//CanvasGradient 객체 생성
CanvasGradient=ctx.createRadialGradient(x1,y1,r1,x2,y2,r2)
//그라데이션 색 추가
CanvasGradient.addColorStop(시작지점, 색)

CreateRadialGradient() 메서드의 인수는 중심이 (x1,y1)이고 반지름이 r1인 원과, 중심이 (x2,y2)이고 반지름이 r2인 원으로 그라데이션을 한다는 것을 지정합니다.

 

 

위 예제는 좌표가 (150,150)으로 같고(중심에 위치) 반지름만 다른 두개의 원을 나타납니다.
좌표와 반지름을 달리하면 다양한 형태로 원형 그라데이션을 할 수 있습니다.
직접 적용해보세요.