Difference between r1.7 and the current
@@ -1,7 +1,7 @@
[[pagelist(html5/)]]
[[TableOfContents]]= 캔버스? =
= 캔버스? =
* 그래픽을 자유롭게 그릴 수 있는 영역.* 고정된 넓이와 높이.
* IE를 제외한 모든 주요 브라우저(?)에서 사용할 수 있는 기능. IE에서 사용하고 싶으면 Explorer Canvas, uuCanfas.js 등의 라이브러리를 사용하여 제한적 기능으로 사용할 수 있다.
@@ -53,13 +53,96 @@
* beginPath()를 호출하여 클리핑 영역을 해제할 수 있다.
* (그림 삽입)
== 스타일 지정 ==
* (그림 삽입)
== 스타일 지정 ==
* strokeStyle
* stroke(), strokeRect() 등을 이용하여 그린 선의 색이나 스타일을 지정한다.
* fillStyle
* fill(), fillRect() 등을 이용하여 그린 선의 색이나 스타일을 지정한다.
* 속성에 지정할 수 있는 값
* CSS Color
* CSS3의 색 지정 방법을 전부 이용할 수 있다.
* 아무 것도 지정하지 않으면 #000000(검은색)이 기본 값이 된다.
* CanvasGradient
* 선형 그라데이션, 원형 그라데이션을 적용할 수 있다.
* CanvasPattern
* img 요소나 video 요소 혹은 다른 캔버스를 사용하여 패턴을 지정할 수 있다.
* globalAlpha
* globalAlpha 속성을 이용하여 투명도를 지정할 수 있다.
* 속성 값은 0.0(완전 투명)부터 1.0(불투명)까지의 값을 지정할 수 있다.
=== 선 스타일 지정 ===
* 선 스타일
* 선의 굵기
* 선의 끝점
* (그림 삽입)
* 선들이 교차했을때 생기는 각
* (그림 삽입)
== 그림자 효과 == * 그리기 컨텍스트가 가진 속성을 지정하여 선이나 도형에 간단하게 그림자 효과를 추가할 수 있다.
== 영역이 겹칠 때의 동작 == * globalCompositeOperation
* 새로운 도형이 기존 이미지와 겹칠때의 행동을 지정하는 속성이다.
* 기본 값은 source-over 이다.
* (그림 삽입)
== 텍스트 삽입 == * 글꼴, 크기, 가로 방향 정렬 위치, 세로 방향 정렬위치를 지정하여 텍스트를 삽입할 수 있다.
* (링크)
== 그래픽 변형 == * 그리기 컨텍스트의 메서드를 이용하여 좌표를
* 확대, 축소
* 회전
* 이동
할 수 있다.
* 좌표 변환 매트릭스
== 그리기 컨텍스트 상태 저장과 복원 == * save()
* 그리기 컨텍스트의 상태를 저장한다.
* 현재 캔버스에 그려진 그래픽이나 패스는 저장하지 않는다.
* 저장하는 상태 및 속성
* 좌표 변환 매트릭스
* 클리핑 영역
* strokeStyle
* fillStyle
* globalAlpha
* lineWidth
* lineCap
* lineJoin
* miterLimit
* shadowOffsetX
* shadowOffsetY
* shadowBlur
* shadowColor
* globalCompositeOperation
* font
* textAlign
* textBaseline
* restore()
* 그리기 컨텍스트의 상태를 복원한다.
* save()로 저장한 상태는 스택에 쌓이고 restore()를 호출할때마다 스택의 탑에서부터 상태를 불러온다.
== 픽셀로 그리기 == * ImageData형 객체를 생성하여 캔버스 위의 비트맵 이미지를 픽셀 단위로 조작할 수 있다.
* ImageData의 속성
* width
* height
* data
* 픽셀 데이터를 나타내는 숫자(0~255)로 이루어진 1차원 배열.
* 배열은 4개의 값이 한묶음으로 1픽셀이 가진 정보(R, G, B, Alpha)를 나타낸다.
== 이미지를 URL로 얻기 == * 캔버스가 가진 toDataURL()을 호출하여 캔버스 내용을 URL로 얻어올 수 있다.
* toDataURL(type)
* 그리기 컨텍스트가 아니고 캔버스가 가진 메서드이다.
* type
* 이미지의 인코딩 방법을 MIME 타입으로 지정한다.
* 기본값은 'image/png'이다.
* 'image/jpeg'지정 시 두번째 인수로 숫자(0.0~1.0)를 넣어 이미지의 품질을 지정할 수 있다.
== 애니메이션 == * 일정 간격으로 캔버스 전체를 다시 그리는 방법으로 애니메이션을 구현할 수 있다.
= 예제 =
= 참고 자료 =
* http://dev.w3.org/html5/canvas-api/canvas-2d-api.html * https://developer.mozilla.org/en/Canvas_tutorial
* [http://mugtug.com/sketchpad/ canvas로 구현된 그림판]
* 쩐다. 의욕상실. - 김수경
* [http://simon.html5.org/dump/html5-canvas-cheat-sheet.html HTML5 canvas cheat sheet]
* [http://diveintohtml5.org/canvas.html#divingin canvas에 관한 아주 자세한 설명] 어떻게 그려지는지에 대해서는 이곳에서 물어보면 대부분 해결 될 듯
* [http://efreedom.com/Question/1-3684492/Html5-Canvas-Framerate framerate 측정 코드]
- html5/VA
- html5/canvas
- html5/drag-and-drop
- html5/form
- html5/geolocation
- html5/offline-web-application
- html5/others-api
- html5/outline
- html5/overview
- html5/richtext-edit
- html5/video&audio
- html5/web-storage
- html5/web-workers
- html5/webSqlDatabase
- html5/websocket
- html5/문제점
1. 캔버스? ¶
- 그래픽을 자유롭게 그릴 수 있는 영역.
- 고정된 넓이와 높이.
- IE를 제외한 모든 주요 브라우저(?)에서 사용할 수 있는 기능. IE에서 사용하고 싶으면 Explorer Canvas, uuCanfas.js 등의 라이브러리를 사용하여 제한적 기능으로 사용할 수 있다.
2. 사용 방법 ¶
<canvas></canvas>
- canvas위에 그림을 그리려면 Javascript로 그리기 컨텍스트를 생성해야한다.
var canvas = document.getElementById(가져오고 싶은 canvas의 id); var context = canvax.getContext("2d");- 그리기 컨텍스트는 그래픽을 그리는 데 도움이 되는 메서드를 제공한다.
2.2. 이미지 삽입 ¶
- img 요소, video 요소, canvas 요소의 DOM 객체를 그릴 수 있다.
- img 요소의 DOM 객체는 Image 생성자를 사용하여 만들 수도 있다.
- video 요소의 DOM 객체를 사용할 경우 drawImage()를 호출한 시점에서 재생되는 프레임을 그려준다.
- img 요소의 DOM 객체는 Image 생성자를 사용하여 만들 수도 있다.
- 이미지를 원래 크기로 삽입할 수 있다.
- 이미지의 사이즈를 지정하여 삽입할 수 있다.
- 원래 이미지에서 일부분을 잘라내어 삽입할 수 있다.
- (그림 삽입)
2.3. 복잡한 선이나 도형 그리기 ¶
- 패스
- 캔버스의 API를 이용하여 그려진 선들의 집합.
- 서브 패스
- 패스를 구성하는 하나하나의 선.
- (그림 삽입)
- 패스를 구성하는 하나하나의 선.
- 그리기 컨텍스트가 제공하는 API를 이용하여 직선, 베지에 곡선, 원호 등 다양한 패스를 그릴 수 있다.
- 캔버스의 API를 이용하여 그려진 선들의 집합.
- 패스를 그려 그래픽을 표시하는 순서
- beginPath()로 그리기 시작.
- 그 이전에 그렸던 패스는 모두 리셋된다.
- 그 이전에 그렸던 패스는 모두 리셋된다.
- 캔버스의 API를 이용하여 패스 그리기.
- 여기서 그린 패스는 아직 그래픽으로 표시되지 않음.
- 여기서 그린 패스는 아직 그래픽으로 표시되지 않음.
- 그래픽을 화면에 표시.
- stroke()
- 패스를 선으로 표현한다.
- 선의 스타일은 strokeStyle 속성으로 지정한다.
- 패스를 선으로 표현한다.
- fill()
- 패스 내부를 채운다.
- 호출시 패스가 닫히지 않았더라도 자동으로 닫힌 상태로 만든다.
- 내부 스타일은 fillStyle 속성으로 지정한다.
- 패스 내부를 채운다.
- clip()
- 패스의 내부를 클리핑 영역으로 지정한다.
- 클리핑 영역이 있는 상태에서 캔버스에 그려지는 그래픽은 클리핑 영역 안쪽에만 표시된다.
- beginPath()를 호출하여 클리핑 영역을 해제할 수 있다.
- (그림 삽입)
- 패스의 내부를 클리핑 영역으로 지정한다.
- stroke()
- beginPath()로 그리기 시작.
2.4. 스타일 지정 ¶
- strokeStyle
- stroke(), strokeRect() 등을 이용하여 그린 선의 색이나 스타일을 지정한다.
- stroke(), strokeRect() 등을 이용하여 그린 선의 색이나 스타일을 지정한다.
- fillStyle
- fill(), fillRect() 등을 이용하여 그린 선의 색이나 스타일을 지정한다.
- fill(), fillRect() 등을 이용하여 그린 선의 색이나 스타일을 지정한다.
- 속성에 지정할 수 있는 값
- globalAlpha
- globalAlpha 속성을 이용하여 투명도를 지정할 수 있다.
- 속성 값은 0.0(완전 투명)부터 1.0(불투명)까지의 값을 지정할 수 있다.
- globalAlpha 속성을 이용하여 투명도를 지정할 수 있다.
2.6. 영역이 겹칠 때의 동작 ¶
- globalCompositeOperation
- 새로운 도형이 기존 이미지와 겹칠때의 행동을 지정하는 속성이다.
- 기본 값은 source-over 이다.
- (그림 삽입)
- 새로운 도형이 기존 이미지와 겹칠때의 행동을 지정하는 속성이다.
2.9. 그리기 컨텍스트 상태 저장과 복원 ¶
- save()
- 그리기 컨텍스트의 상태를 저장한다.
- 현재 캔버스에 그려진 그래픽이나 패스는 저장하지 않는다.
- 저장하는 상태 및 속성
- 좌표 변환 매트릭스
- 클리핑 영역
- strokeStyle
- fillStyle
- globalAlpha
- lineWidth
- lineCap
- lineJoin
- miterLimit
- shadowOffsetX
- shadowOffsetY
- shadowBlur
- shadowColor
- globalCompositeOperation
- font
- textAlign
- textBaseline
- 좌표 변환 매트릭스
- restore()
- 그리기 컨텍스트의 상태를 복원한다.
- save()로 저장한 상태는 스택에 쌓이고 restore()를 호출할때마다 스택의 탑에서부터 상태를 불러온다.
- 그리기 컨텍스트의 상태를 복원한다.
- 그리기 컨텍스트의 상태를 저장한다.
2.11. 이미지를 URL로 얻기 ¶
- 캔버스가 가진 toDataURL()을 호출하여 캔버스 내용을 URL로 얻어올 수 있다.
- toDataURL(type)
- 그리기 컨텍스트가 아니고 캔버스가 가진 메서드이다.
- type
- 이미지의 인코딩 방법을 MIME 타입으로 지정한다.
- 기본값은 'image/png'이다.
- 'image/jpeg'지정 시 두번째 인수로 숫자(0.0~1.0)를 넣어 이미지의 품질을 지정할 수 있다.
- 이미지의 인코딩 방법을 MIME 타입으로 지정한다.
- 그리기 컨텍스트가 아니고 캔버스가 가진 메서드이다.
4. 참고 자료 ¶
- http://dev.w3.org/html5/canvas-api/canvas-2d-api.html
- https://developer.mozilla.org/en/Canvas_tutorial
- canvas로 구현된 그림판
- 쩐다. 의욕상실. - 김수경
- 쩐다. 의욕상실. - 김수경
- HTML5 canvas cheat sheet
- canvas에 관한 아주 자세한 설명 어떻게 그려지는지에 대해서는 이곳에서 물어보면 대부분 해결 될 듯
- framerate 측정 코드
