- HTML Canvas
HTML5 Canvas를 이용하면 브라우저의 특정 사각형 영역에 2D 이미지를 그릴 수 있다.
그릴 수 있는 기본 도형은 선, 사각형, 곡선, 원이며 텍스트와 이미지 출력이 가능하다.
- Canvas 로 할 수 있는 일
동적 그래프 그리기
(http://www.benjoffe.com/code/demos/interpolate/)
웹 그림판
HTML5 Canvas 기능으로 구성되어 있으며 Windows, Mac OS X, Linux 등 사용자의 OS와 상관없이 작동한다
(http://mugtug.com/sketchpad/)
- 브라우저 지원 현황
(http://caniuse.com/) 참고
- <canvas> 태그의 동작 원리
Canvas 에서 좌표 값의 이해
x : 가로 방향의 시작 위치
y : 세로 방향의 시작 위치
width : 도형의 폭
height : 도형의 높이
숫자의 단위 : pixels
- Canvas 선그리기
주어진 좌표를 각 꼭지점으로 하는 삼각형을 그린다.
이를 위하여 아래에 제시된 선 그리기 메소드를 응용 한다.
- 곡선(Quadratic Curve) 그리기
- 자동으로 다양한 원을 그리는 애니메이션 구현 (실습)
- Canvas 필터 효과
RGB 값을 조정하여 필터 효과를 줄 수 있다.
위 코드처럼 원본 이미지 데이터를 픽셀 단위로 획득 후, 각 픽셀 r,g,b 값을 증가시켜
더 밝은 색상으로 변경 한다.
'Client Standard > HTML' 카테고리의 다른 글
Drag and Drop (0) | 2013.08.01 |
---|---|
HTML5 Video (0) | 2013.08.01 |
HTML5의 새로운 요소 (0) | 2013.08.01 |
[HTML5] Drag and Drop 기능 (0) | 2013.07.24 |
[HTML5] html5 주저리 주저리... (0) | 2013.07.22 |