[[pagelist(html5)]] [[TableOfContents]] = 캔버스? = * 그래픽을 자유롭게 그릴 수 있는 영역. * 고정된 넓이와 높이. * IE를 제외한 모든 주요 브라우저(?)에서 사용할 수 있는 기능. IE에서 사용하고 싶으면 Explorer Canvas, uuCanfas.js 등의 라이브러리를 사용하여 제한적 기능으로 사용할 수 있다. = 사용 방법 = {{{ }}} * canvas위에 그림을 그리려면 Javascript로 그리기 컨텍스트를 생성해야한다. * {{{ var canvas = document.getElementById(가져오고 싶은 canvas의 id); var context = canvax.getContext("2d"); }}} * 그리기 컨텍스트는 그래픽을 그리는 데 도움이 되는 메서드를 제공한다. == 사각형 그리기 == * 윤곽이 있는 사각형을 그릴 수 있다. * 색으로 채운 사각형을 그릴 수 있다. * 사각형을 지울 수 있다. == 이미지 삽입 == * img 요소, video 요소, canvas 요소의 DOM 객체를 그릴 수 있다. * img 요소의 DOM 객체는 Image 생성자를 사용하여 만들 수도 있다. * video 요소의 DOM 객체를 사용할 경우 drawImage()를 호출한 시점에서 재생되는 프레임을 그려준다. * 이미지를 원래 크기로 삽입할 수 있다. * 이미지의 사이즈를 지정하여 삽입할 수 있다. * 원래 이미지에서 일부분을 잘라내어 삽입할 수 있다. * (그림 삽입) == 복잡한 선이나 도형 그리기 == * 패스 * 캔버스의 API를 이용하여 그려진 선들의 집합. * 서브 패스 * 패스를 구성하는 하나하나의 선. * 패스를 그려 그래픽을 표시하는 순서 1. beginPath()로 그리기 시작. * 그 이전에 그렸던 패스는 모두 리셋된다. 1. 캔버스의 API를 이용하여 패스 그리기. * 여기서 그린 패스는 아직 그래픽으로 표시되지 않음. 1. stroke()나 fill()을 이용하여 그래픽을 화면에 표시. * fill() 호출시 패스가 닫히지 않았더라도 자동으로 닫힌 상태로 만들어 내부를 채워준다. == 스타일 지정 == == 그림자 효과 == == 영역이 겹칠 때의 동작 == == 텍스트 삽입 == == 그래픽 변형 == == 그리기 컨텍스트 상태 저장과 복원 == == 픽셀로 그리기 == == 이미지를 URL로 얻기 == == 애니메이션 == ---- 꼐속