17. gradient - 선과 면에 그라디언트 주기

GuriZzang.com에 오시면 

더 자세한 내용을 보실 수 있습니다.

.createLinearGradient( x1,y1,x2,y2 )

선 혹은 면에 선형 그라디언트를 적용합니다.

• .createLinearGradient( x1,y1,x2,y2 )
• 인자 : x1, y1
• 설명 : 그라디언트를 적용할 면의 시작 축좌표 입니다.
• 인자 : x12 y2
• 설명 : 그라디언트를 적용할 면의 종료 축좌표 입니다.

선형 그라디언트는 선 혹은 면등의 위에 박스형 그라디언트 영역을 만든 후 덮는 개념으로 이해 하시면 됩니다. 기본적으로 박스를 만드는 .fillRect()의 인자와 동일합니다.

선이 색칠되는 방향은 x1,y1 지점부터 x2,y2지점까지 선으로 이었을때 그 축의 직각 방향으로 색이 칠해지게 됩니다.
전 예제를 만들기 전까지 x1,y1에서 x2,y2 까지 면을 그리고 덮는줄 알았네요;;

.createRadialGradient( x1,y1,r1,x2,y2,r2 )

선 혹은 면에 원형 그라디언트를 적용합니다.

• .createRadialGradient( x1,y1,r1,x2,y2,r2 )
• 인자 : x1,y1
• 설명 : 안쪽 원형 그라디언트의 중심 좌표 입니다.
• 인자 : r1
• 설명 : 안쪽 원형의 반지름 입니다.
• 인자 : x2,y2
• 설명 : 바깥쪽 원형 그라디언트의 중심 좌표 입니다.
• 인자 : r2
• 설명 : 바깥쪽 원형의 반지름 입니다.

원형 그라디언트는 두개의 원에 그라디언트 단계를 만든다고 생각하시면 됩니다. 시작되는 작은원과 종료되는 큰 원을 만든 후 그 두 색의 색단계를 표현하는 방식인데요.
하이라이트등의 표현은 시작 원의 크기와 좌표에 변화를 주시면 될듯 합니다.

이 두가지 그라디언트 함수로 생성된 객체에는 .addColorStop() 이라는 함수를 사용할 수 있습니다. 인자는 두개이며 첫번째 인자는 색상의 종료 지점과 색상코드 입니다.

그라디언트 시작점이 0이고 종료 지점이 1 입니다. 각각의 그라디언트 색상은 0~1사이의 소수를 사용해서 설정 가능합니다.

?

1 2 3 4

ctx.addColorStop(0, '#00ABEB'); ctx.addColorStop(0.5, '#fff'); ctx.addColorStop(0.5, '#26C000'); ctx.addColorStop(1, '#fff');

아래의 예제는 박스에 선형 그라디언트와 원형 그라디언트를 적용한 모습입니다.( 참고로 원형 그라디언트는 .arc()로 그려야 하는데 사각형인.fillRect()로 그려서 1을 주면 박스 형태가 되어 버립니다. )

Source 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

function draw() {           var ctx = document.getElementById('canvas').getContext('2d');           // 그레이디언트를 생성한다     var lingrad = ctx.createLinearGradient(0,0,0,150);     lingrad.addColorStop(0, '#00ABEB');     lingrad.addColorStop(0.5, '#fff');     lingrad.addColorStop(0.5, '#26C000');     lingrad.addColorStop(1, '#fff');           var lingrad2 = ctx.createLinearGradient(0,50,0,95);     lingrad2.addColorStop(0.5, '#000');     lingrad2.addColorStop(1, 'rgba(0,0,0,0)');           // 외곽선과 채움 스타일에 그레이디언트를 적용한다     ctx.fillStyle = lingrad;     ctx.strokeStyle = lingrad2;           // 도형을 그린다     ctx.fillRect(10,10,130,130);     ctx.strokeRect(50,50,50,50);           var radgrad = ctx.createRadialGradient(225,75,20,225,75,50);     radgrad.addColorStop(0, 'yellow');     radgrad.addColorStop(0.4, 'blue');     radgrad.addColorStop(0.7, 'violet');     radgrad.addColorStop(0.9, 'red');     radgrad.addColorStop(1, 'rgba(255,255,255,0)');                 ctx.fillStyle = radgrad;     ctx.fillRect(150,10,150,150);       }

Demo

시험삼아 원형 그라디언트의 단계를 여러개를 적용해 보았습니다.

다시 말씀드리자면 원형 소스의 종료 지점이 1에 알파값 0을 준 이유는 .arc()로 원형을 그렸어야 하는데 .fillRect()로 사각형을 만들었기 때문에 1에 색상을 넣으면 박스가 전부 보이기 때문입니다.

이번엔 좀 더 많은 원이 겹쳐지는 예제를 보겠습니다.

Source 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

function draw() {     var ctx = document.getElementById('canvas').getContext('2d');           // Create gradients     var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);     radgrad.addColorStop(0, '#A7D30C');     radgrad.addColorStop(0.9, '#019F62');     radgrad.addColorStop(1, 'rgba(1,159,98,0)');           var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);     radgrad2.addColorStop(0, '#FF5F98');     radgrad2.addColorStop(0.75, '#FF0188');     radgrad2.addColorStop(1, 'rgba(255,1,136,0)');           var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);     radgrad3.addColorStop(0, '#00C9FF');     radgrad3.addColorStop(0.8, '#00B5E2');     radgrad3.addColorStop(1, 'rgba(0,201,255,0)');           var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);     radgrad4.addColorStop(0, '#F4F201');     radgrad4.addColorStop(0.8, '#E4C700');     radgrad4.addColorStop(1, 'rgba(228,199,0,0)');           // draw shapes     ctx.fillStyle = radgrad4;     ctx.fillRect(0,0,150,150);     ctx.fillStyle = radgrad3;     ctx.fillRect(0,0,150,150);     ctx.fillStyle = radgrad2;     ctx.fillRect(0,0,150,150);     ctx.fillStyle = radgrad;     ctx.fillRect(0,0,150,150); }

Demo