공부/HTML5
그림자와 그라데이션 구현하기
Ohming
2011. 11. 5. 13:43
그림자와 그라데이션 구현은 알아두면 유용하게 쓰일 것 같다.
그림자를 구현하기 위해서 필요한 4개의 속성에는
Context.shadowColor : 그림자와 색상을 지정. 16진수와 RGB값 모두 사용가능하다.
Context.shadowOffsetX : 그림자의 가로 위치를 지정해 준다.
Context.shadowOffsetY : 그림자의 세로 위치를 지정해 준다.
Context.shadowBlur : 그림자를 어느 정도 흐리게 할지 정해 준다.
그라데이션을 구현하기 위해서 필요한 2가지 메소드
createLinearGradient - x0, y0, x1, y1 - 선형 그라데이션
creatRadialGradient - x0, y0, r0, x1, y1, r1 - 원형 그라데이션
한가지 더 알아 두어야 할 것은 addColorStop 메소드인데, 이걸 사용하면 그라데이션에서 사용할 색을 설정해 줄 수 있다.
그 후에 fillStyle에 생성된 그라데이션을 넣으면 된다.
그림자를 구현하기 위해서 필요한 4개의 속성에는
Context.shadowColor : 그림자와 색상을 지정. 16진수와 RGB값 모두 사용가능하다.
Context.shadowOffsetX : 그림자의 가로 위치를 지정해 준다.
Context.shadowOffsetY : 그림자의 세로 위치를 지정해 준다.
Context.shadowBlur : 그림자를 어느 정도 흐리게 할지 정해 준다.
그라데이션을 구현하기 위해서 필요한 2가지 메소드
createLinearGradient - x0, y0, x1, y1 - 선형 그라데이션
creatRadialGradient - x0, y0, r0, x1, y1, r1 - 원형 그라데이션
한가지 더 알아 두어야 할 것은 addColorStop 메소드인데, 이걸 사용하면 그라데이션에서 사용할 색을 설정해 줄 수 있다.
그 후에 fillStyle에 생성된 그라데이션을 넣으면 된다.