[그래픽 처리] 그라데이션(gradation)/createLinearGradient()/CreateRadialGradient()
[1] 선형 그라데이션 - createLinearGradient()
선형 그라데이션은 왼쪽에서 오른쪽(혹은 아래에서 위)으로 갈수록 점점 색이 변화하는 그라데이션을 말합니다.
createLinearGradient() 메서드를 사용해 지정할 수 있습니다.
addColorStop() 메서드의 첫 번째 인수인 시작 지점에 0~1.0까지의 실수를 지정하여, 어느 지점에 어떤 색을 표시할 것인지를 지정합니다.
g = ctx.createLinearGradient(x1, y1. x2, y2) 에서 y2 좌표를 변경하니 적용되었습니다.
[2] 원형 그라데이션 - CreateRadialGradient()
원형 그라데이션이은 원의 중심으로부터 외각으로 갈수록 서서히 색이 변화하는 것을 말합니다.
createRadialGradient() 메서드를 사용해 객체를 만들고 addColorStop() 메서드로 그라데이션 색을 지정해줍니다.
CreateRadialGradient() 메서드의 인수는 중심이 (x1,y1)이고 반지름이 r1인 원과, 중심이 (x2,y2)이고 반지름이 r2인 원으로 그라데이션을 한다는 것을 지정합니다.
[1] 선형 그라데이션 - createLinearGradient()
선형 그라데이션은 왼쪽에서 오른쪽(혹은 아래에서 위)으로 갈수록 점점 색이 변화하는 그라데이션을 말합니다.
createLinearGradient() 메서드를 사용해 지정할 수 있습니다.
addColorStop() 메서드의 첫 번째 인수인 시작 지점에 0~1.0까지의 실수를 지정하여, 어느 지점에 어떤 색을 표시할 것인지를 지정합니다.
//CanvasGradient 객체 만듬
CanvasGradient = ctx.createLinearGradient(x1, y1. x2, y2)
//그라데이션 색 추가
CanvasGradient.addColorStop(시작지점, 색)
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(시작지점, 색)
CanvasGradient=ctx.createRadialGradient(x1,y1,r1,x2,y2,r2)
//그라데이션 색 추가
CanvasGradient.addColorStop(시작지점, 색)
CreateRadialGradient() 메서드의 인수는 중심이 (x1,y1)이고 반지름이 r1인 원과, 중심이 (x2,y2)이고 반지름이 r2인 원으로 그라데이션을 한다는 것을 지정합니다.
위 예제는 좌표가 (150,150)으로 같고(중심에 위치) 반지름만 다른 두개의 원을 나타납니다.
좌표와 반지름을 달리하면 다양한 형태로 원형 그라데이션을 할 수 있습니다.
직접 적용해보세요.
'HTML5' 카테고리의 다른 글
[그래픽 처리] 그래프 렌더링/꺽은선 그래프/모눈종이 (0) | 2012.02.10 |
---|---|
[그래픽 처리] 그림 파일 렌더링/drawImage() (0) | 2012.02.09 |
[그래픽 처리] 컨텍스트(Context)의 속성 (0) | 2012.02.09 |
[그래픽 처리] 렌더링 메서드/arc(), arcTo()/quadraticCurveTo(), bezieCurveTo()/rect() (0) | 2012.02.09 |
[그래픽 처리] 다각형 렌더링 (0) | 2012.02.08 |
[그래픽 처리] 캔버스의 기초/RGB 색상표/HTML 색상표 (0) | 2012.02.08 |
[그래픽 처리] 캔버스의 기초/렌더링 컨텍스트 (0) | 2012.02.08 |