7. 그림자 효과(Shadow Effect)와 색상의 점진적 변화주기(Gradient)

7. 그림자 효과(Shadow Effect)와 색상의 점진적 변화주기(Gradient)

canvas 내에 그려지는 선, 도형, 텍스트 등은 우리가 파워포인트, 포토샵 등에서 사용하는 그림자 효과(Shadow Effect)를 줄 수 있습니다. 또한 Gadient 관련한 메서드들을 이용하여 선형, 혹은 원형태로 색상이 점진적으로 변하는 처리를 선, 도형, 텍스트 등에 효과를 줄 수 있습니다.

7.1 그림자 효과(Shadow Effect)

그림자 효과를 주는 방법은 “http://www.w3.org/TR/2dcontext/#shadows”에 나타난 것처럼 다음과 같이 4 가지 속성을 이용하여 적용시킬 수 있습니다.

context.shadowColor
context.shadowOffsetX
context.shadowOffsetY
context.shadowBlur

첫 번째 shadowColor 속성은 그림자의 색상을 설정하는데 사용되는 속성으로 “blue”, “red”와 같이 문자열 형태로 해당 색상을 설정해주거나 기존의 RGB(Red Green Blue)나 RGB에 Alpha(불투명도)를 rgba() 함수를 이용하여 “"rgba(0,0,0,0.5)"와 같이 설정할 수 있습니다.

shadowOffsetX, shadowOffsetY 속성은 사각형이나 직선 등과 같은 그림자를 나타내는 본체로부터 그림자를 어느 위치까지 그림자를 나타낼 것인지를 설정하는 속성으로 만일 shadowOffsetX가 5이고 shadowOffsetY가 5라면 그림자를 나타내는 본체로부터 x축의 + 방향(우측)으로 5, 아래 방향(y축)으로 5만큼 그림자를 나타내게 되고 반대로 음수(-)의 형태로 설정되면 그 반대 방향으로 그림자가 생성되게 됩니다. 마지막으로 shadowBlur 속성은 Blur(번짐) 효과의 수준을 명시하는 속성을 나타냅니다.

이제 직사각형, 라인, 텍스트에 방금 전 설명한 4 가지 속성들을 이용하여 그림자 효과를 주는 방법을 알아봅니다. “basic.html” 파일을 메모장을 이용하여 연 후 “// canvas 그릴 선이나 도형 작성 “ 아래에 다음과 같이 코드를 작성해봅니다.

      // canvas에 그릴 선이나 도형 작성
      //사각형 그리기
      context.shadowColor = "rgba(0,0,255,1)";
      context.shadowOffsetX = 10;
      context.shadowOffsetY = 10;
      context.shadowBlur = 10;                        
      context.fillStyle = "#B3E3F5";
      context.fillRect(20,20,380,100);
       
      //텍스트 나타내기  
      var theString = "HTM5 canvas에 텍스트 쓰기";
      context.fillStyle = "black";
      context.shadowColor = "rgba(0,0,0,0.5)";
      context.shadowOffsetX = 5;
      context.shadowOffsetY = 5;
      context.shadowBlur = 5;
      context.font = "20pt Century Gothic";
      context.fillText(theString, 35,75);

      //직선 그리기
      context.lineWidth = 20;
      context.shadowColor = "rgba(150,0,150,0.5)";
      context.shadowBlur = 15;
      context.shadowOffsetX = -15;
      context.shadowOffsetY = -15;
      context.strokeStyle = "red";
      context.beginPath();
      context.moveTo(20,200);
      context.lineTo(220,200);
      context.stroke();    

위와 같이 작성한 후 다른 이름으로 저장을 선택하여 “ShadowEx.html”로 저장하고 IE9를 통해 열어보면 다음과 같습니다. 

7.2 색상의 점진적 변화주기(Gradient)

사각형이나 원, 다각형 등에 색상의 점진적 변화Gradient)를 주는 형태는 선형(linear) 형태로 주는 방법과 방사형(radial) 형태로 주는 것이 가능하며 다음과 같은 형식으로 사용할 수 있습니다.

gradient = context.createLinearGradient(x0, y0, x1, y1)
gradient = context.createRadialGradient(x0, y0, r0, x1, y1, r1)
생성된 gradient 객체.gradient.addColorStop(offset, color)

위에서 gradient는 createLinearGradient(), createRadialGradient() 메서드를 실행하면 반환되는 CanvasGradient 객체를 의미합니다. 따라서 실제 사용할 때는 var 키워드를 이용하여 gradient 객체를 생성하여 사용합니다. 첫 번째 createLinearGradient() 메서드에 입력 파라미터로 사용된 (x0, y0)은 시작좌표를 (x1, y1)은 끝점 좌표를 의미합니다.
마찬가지로 createRadialGradient() 메서드에 사용된 (x0, y0, r0)은 시작좌표와 반지름(radius)를 의미하며 (x1, y1, r1)는 끝점 좌표와 반지름(radius)를 나타냅니다.

다음으로 색상을 설정하는 addColorStop() 메서드입니다. 선형이든, 방사형이든 직선, 도형이나 텍스트 등에 색상에 점진적 변화를 주기 위해서는 색상을 설정해야 하는데 이 때 사용하는 메서드가 바로 addColorStop() 메서드입니다. 먼저 offset 입력 파라미터는 0부터 1 사이의 값으로 0은색변화의 시작부분을 1은 끝부분을 나타냅니다. 두 번째 입력 파라미터인 color는 “black”, “blue”와 같이 문자열 형태로 색상을 명시해주면 됩니다.

이제 예제를 해볼까요? “basic.html” 파일을 메모장을 이용하여 연 후 “// canvas 그릴 선이나 도형 작성 “ 아래에 다음과 같이 코드를 작성해봅니다.

      // canvas에 그릴 선이나 도형 작성   
      //선형 경사도 그리기
      var linearGrd = context.createLinearGradient(20,20,380,100);     
      linearGrd.addColorStop(0, "red"); // 빨간색으로 시작
      linearGrd.addColorStop(0.5, "blue"); // 중간에 파란색
      linearGrd.addColorStop(1,"green"); // 마지막은 녹색
      context.fillStyle = linearGrd; //설정된 gradient로 사각형 칠하기 
      context.fillRect(20,20,380,100);

위와 같이 작성한 후 다른 이름으로 저장을 선택하여 ”GradientEx.html”로 저장한 다음 IE9를 이용하여 확인하면 다음과 같이 나타납니다.

위의 직사각형 안에 텍스트를 하나 배치해볼까요? 방금 전 코드 다음에 아래의 코드 4줄을 추가해줍니다.     

      var theString = "HTM5 canvas에 텍스트 쓰기";      
      context.fillStyle = "white"
      context.font = "20pt Century Gothic";
      context.fillText(theString, 35,75);

IE9를 통해서 보면 다음과 같이 텍스트가 적당한 위치에 나타납니다.

지금까지 선형(linear)의 점진적인 색변화를 적용해 보았는데 조금 비스듬하게 만들어 보기 위해서 다음의 라인을 수정해봅니다.

      var linearGrd = context.createLinearGradient(20,20,380,100);     
      var linearGrd = context.createLinearGradient(20,20,200,100);

위와 같이 끝 점의 좌표를 (200, 100)으로 변경, 저장한 후 IE9를 통해 보면 다음과 같이 아까와는 다르게 조금은 경사가 있는 형태의 결과를 보여주게 됩니다.

다음으로 createRadialGradient() 메서드를 알아볼까요? “context.fillText(theString, 35,75);” 코드 다음 라인에 아래와 같이 코드를 작성합니다.

      //원형 경사도 그리기
      var radialGrd = context.createRadialGradient(60,175,10,70,200,50);
      radialGrd.addColorStop(0, "#EFEFFB");
      radialGrd.addColorStop(0.5, "#2E2EFE");
      radialGrd.addColorStop(1,"#0404B4");
      context.lineWidth = 3;
      context.fillStyle = radialGrd;
      context.beginPath();
      context.arc(70,200,50,0,2*Math.PI);
      context.stroke();
      context.fill();                              

      context.lineWidth = 5;
      var radialGrd2 = context.createRadialGradient(210,175,10,220,200,50);
      radialGrd2.addColorStop(0, "#EFEFFB");        
      radialGrd2.addColorStop(1,"#0404B4");
      context.fillStyle = radialGrd2;
      context.beginPath();
      context.arc(220,200,50,0,2*Math.PI);
      context.stroke();
      context.fill();

      var radialGrd3 = context.createRadialGradient(345,175,10,370,200,50);
      radialGrd3.addColorStop(0, "#EFEFFB");
      radialGrd3.addColorStop(0.5, "#2E2EFE");
      context.fillStyle = radialGrd3;                                          
      context.beginPath();
      context.arc(370,200,50,0,2*Math.PI);
      context.stroke();
      context.fill();         

위와 같이 3개의 원을 그리고 그 안에 Gradient 효과를 주는 코드를 작성, 저장한 후 IE9로 열어보면 순서대로 다음과 같이 나타나게 됩니다.

- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 Canvas에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인 학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기 바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를 비밀댓글로 남겨주시면 연락드리겠습니다.