본문 바로가기
공부/HTML5

그림자와 그라데이션 구현하기

by Ohming 2011. 11. 5.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
그림자와 그라데이션 구현은 알아두면 유용하게 쓰일 것 같다.

그림자를 구현하기 위해서 필요한 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에 생성된 그라데이션을 넣으면 된다.

'공부 > HTML5' 카테고리의 다른 글

액티브엑스가 필요 없는 내장 미디어  (0) 2011.11.05
웹 폼  (0) 2011.11.05
Canvas3 선 긋기  (0) 2011.11.05
Canvas2 사각형 그리기  (0) 2011.11.04
Canvas1 그림 그리기 준비  (0) 2011.11.04

댓글