CLOSE SEARCH
POSTS TAGGED WITH: HTML 5

Canvas on HTML5 – Text

텍스트를 출력하는 예제

 

Canvas 에서는 속이 채워진 텍스트를 출력하거나 외곽선 텍스트를 출력할 수도 있다. 그리고 이전에 설정된 fillStyle이나 strokeStyle의 영향을 받는다.

텍스트 정렬에 사용할 수 있는 값들은 아래와 같다.

  • textAlign : left / start, center, right / end
  • textBaseline : top, middle, bottom, hanging, alphabetic, ideographic

그리고 maxWidth 속성을 지정하면 전체 텍스트가 설정한 너비내에서 축소/확대되어 출력된다.

Canvas on HTML5 – Shadow Effect & Transform

Canvas에서 도형이나 선과 같은 그리기 개체에 그림자 효과를 추가할 수 있다. 그림자의 위치, 색상, 블러효과를 설정할 수 있다.

 

또한, 그래픽 컨텍스트의 변환 기능을 이용해서 그리기 개체들의 좌표변환, 확대/축소, 회전 등의 작업을 수행할 수 있다.

Canvas on HTML5 – Color & Fill Style

canvas의 fillStyle이나 strokeStyle에는 아래와 같은 3가지 값을 지정할 수 있다.

  • CSS Color
  • CanvasGradient
  • CanvasPattern

1. CSS Color
CSS에서 사용하는 색상과 동일한 값을 사용할 수 있다. 기본값은 검은색이다.
es) ‘red’, ‘#00FF00’, ‘rgb(0, 0, 255)’ 등

 

2. CanvasGradient
LinearGradient, RadialGradient의 두가지 종류가 있다.

 

3. CanvasPattern
이미지나 비디오, 캔버스 등을 패턴으로 지정할 수 있다.

 

4. 투명도 지정

HTML5에 새롭게 추가된 요소

video : 비디오 재생에 사용되는 요소

audio : 오디오 재생에 사용되는 요소

source :  비디오/오디오의 URL이나 종류를 지정하는데 사용하는 요소

figure : 문서안에 추가되는 내용을 표시하기 위해 사용하는 요소

canvas : 해상도에 의존적인 비트맵 캔버스

embed : 외부 플러그인이나 상호작용 요소를 추가할 지점을 나타내는 요소

 

section : 문서의 아웃라인을 구성하는 범용 섹션

nav : 네비게이션 메뉴

header : 섹션의 헤더

footer : 섹션의 풋터

article : 웹페이지로부터 독립된 내용을 담고있는 섹션의 한 종류

aside : 외부 섹션에 대한 추가 정보를 담고있는 섹션의 한 종류

hgroup : 제목과 하위제목을 하나로 묶는데 사용되는 요소

 

keygen : 키 쌍을 생성하는 컨트롤

output : 계산 결과를 나타내는 요소

progress : 진행상태를 표시하는 요소

meter : 미터기 형식으로 데이터를 표현하는 요소

 

details : 사용자가 열고 닫을 수 있는 상세정보를 표시하는 요소

datalist : 자동완성 기능에 사용되는 목록을 저장하기 위해 사용하는 요소

HTML 5 브라우저 지원 현황 & 기술문서 & 관련 리소스

현재 출시된 브라우저의 버전별 HTML5 관련 기능 지원여부를 확인할 수 있다.

http://caniuse.com

 

HTML5 공식 기술 문서

http://www.w3.org/TR/html5/

 

WHATWG(Web Hypertext Application Technology Working Group)

http://www.whatwg.org/

 

HTML5 검증

http://html5.validator.nu/

 

Modernizr 2 is your starting point for making the best websites and applications that work exactly right no matter what browser or device your visitors use.

http://www.modernizr.com/