More actions
[[pagelist(html5)]]
캔버스?
- 그래픽을 자유롭게 그릴 수 있는 영역.
- 고정된 넓이와 높이.
- IE를 제외한 모든 주요 브라우저(?)에서 사용할 수 있는 기능. IE에서 사용하고 싶으면 Explorer Canvas, uuCanfas.js 등의 라이브러리를 사용하여 제한적 기능으로 사용할 수 있다.
사용 방법
<canvas></canvas>
- canvas위에 그림을 그리려면 Javascript로 그리기 컨텍스트를 생성해야한다.
var canvas = document.getElementById(가져오고 싶은 canvas의 id);
var context = canvax.getContext("2d");
- 그리기 컨텍스트는 그래픽을 그리는 데 도움이 되는 메서드를 제공한다.
사각형 그리기
- 윤곽이 있는 사각형을 그릴 수 있다.
- 색으로 채운 사각형을 그릴 수 있다.
- 사각형을 지울 수 있다.
이미지 삽입
- img 요소, video 요소, canvas 요소의 DOM 객체를 그릴 수 있다.
- img 요소의 DOM 객체는 Image 생성자를 사용하여 만들 수도 있다.
- video 요소의 DOM 객체를 사용할 경우 drawImage()를 호출한 시점에서 재생되는 프레임을 그려준다.
- 이미지를 원래 크기로 삽입할 수 있다.
- 이미지의 사이즈를 지정하여 삽입할 수 있다.
- 원래 이미지에서 일부분을 잘라내어 삽입할 수 있다.
- (그림 삽입)
꼐속