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