본문 바로가기

나의 플랫폼/HTML5

[ HTML 5 ] HTML5 캔버스 문자 API

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
1. 자동 기본값 : 10px san-serif
2. measureText : Text의 속성을가지고 있는 객체( 현재 width만 구현되어 있는 상태 )
3. 현재까지 나온 event : 
   - 'load' : Canvas가 로드 될시
   - 'keyup' : 키보드를 눌렀을 때
   - 'change' : 컴포넌트의 변화가 있었을 때
   - 'click' : 컴포넌트를 클릭 했을 시
4. 중복되는 event함수에서는 eval()을 사용할 수 있다.
   - eval(구분자 +' = e.target.value')
   - 보안의 문제점이 있다.
   - 알아보기가 어렵다.
5. 표준 폰트 스타일 : normal | italic | oblique | inherit
   표준 폰트 두께 : normal | bold | bolder | lighter | 100 ~ 900 | inherit | auto
   표준 폰트 모양 : serif , sans-serif , cursive , fantasy , monospace
  
6. Color Picker-> jsColor 색상 선택기
7. 폰트 세로 기준선 : top | hanging | middle | alphabetic | ideograhpic | bottom
   폰트 가로 기준선 : center | start | end | left | right
8. dir 속성 : abcde
   ltr -> |abcde                       |
   rtl -> |                       abcde|
   rtl이  |edcba                       | 처럼 나오는 줄 알았는데 아니었네요^^;;
9. globalAlpha는 Canvas전체에 영향을 주므로 사용의 주의가 필요.
   textAlpha에 rgba(255, 0, 0, 1.0)를 이용하여 alpha를 조절.

10. textColor의 Alpha를 조절하면 shadowColor의 Alpha도 자동으로 조절된다.

출처: HTML5 Canvas ( 한빛 미디어 )