HTML5 Canvas

• 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 값을 증가시켜

더 밝은 색상으로 변경 한다.