canvas�� 그림�� 그리려면 Javascript로 그리기 ��를 ��다.
- ```
var canvas = document.getElementById(가������고 ������ canvas��� id);
var context = canvax.getContext("2d");
```
- 그리기 ��는 그래�� 그리는 데 �� 되는 메��드를 ��공��다.

2.1. ��각�� 그리기 ¶

��곽�� 는 ��각�� 그릴 �� 다.
��로 �� 각�� 그릴 �� 다.
��각�� 다.

2.2. ��미�� ¶

img ��, video ��, canvas �� DOM 객��를 그릴 �� 다.
- img �� DOM 객��는 Image ��를 �� 만들 �� 다.
- video �� DOM 객��를 �� 경�� drawImage()를 �� 되는 �� 그려��다.
��미��를 ��래 ��기로 �� 다.
��미�� 를 �� 다.
��래 ��미�� 부�� 라내�� 다.
(그림 ��)

2.3. 복�� 나 �� 그리기 ¶

��
- �� API를 �� 그려�� 들�� .
- ��브 ��
  - ��를 구��는 ��나��나�� .
  - (그림 ��)
- 그리기 ��가 ��공��는 API를 �� , 베�� 곡��, �� 다�� 를 그릴 �� 다.
��를 그려 그래�� 는 ��
1. beginPath()로 그리기 ��.
  - 그 �� 그렸던 ��는 모두 리��된다.
2. �� API를 �� 그리기.
  - ��기�� 그린 ��는 �� 그래��로 ��되�� .
3. 그래�� 면�� .
  - stroke()
    - ��를 ��로 ��다.
    - �� strokeStyle ��로 ��다.
  - fill()
    - �� 내부를 ��다.
    - �� 가 닫�� 더라�� 동��로 닫�� 로 만든다.
    - 내부 �� fillStyle ��로 ��다.
  - clip()
    - �� 내부를 ��리�� 로 ��다.
    - ��리�� 는 �� 그려��는 그래�� 리�� 만 ��된다.
    - beginPath()를 �� 리�� 다.
    - (그림 ��)

2.4. �� ¶

strokeStyle
- stroke(), strokeRect() �� 그린 �� 나 �� 다.
fillStyle
- fill(), fillRect() �� 그린 �� 나 �� 다.
�� 는 값
- CSS Color
  - CSS3�� 방법�� 부 �� 다.
  - ��무 것�� 면 #000000(검��)�� 기본 값�� 된다.
- CanvasGradient
  - �� 그라데��, �� 그라데�� 다.
- CanvasPattern
  - img ��나 video �� 다른 ��를 �� 다.
globalAlpha
- globalAlpha �� 명��를 �� 다.
- �� 값�� 0.0(�� 명)부�� 1.0(��명)까�� 값�� 다.

2.4.1. �� ¶

��
- �� 굵기
- �� 끝��
  - (그림 ��)
- ��들�� 교��때 ��기는 각
  - (그림 ��)

2.5. 그림�� 과 ¶

그리기 ��가 가�� 나 �� 단��게 그림�� 과를 ��가�� 다.

2.6. �� 겹�� 때�� 동�� ¶

globalCompositeOperation
- ��로�� 기�� 미�� 겹��때�� 동�� 는 ��다.
- 기본 값�� source-over ��다.
- (그림 ��)

2.7. �� ¶

글꼴, ��기, 가로 방�� 렬 ��, ��로 방�� 렬��를 �� 를 �� 다.
(링��)

2.8. 그래�� 변�� ¶

그리기 �� 메��드를 �� 를
- ��대, ��
- ��
- ��동
  �� 다.
- �� 변�� 매��릭��

2.9. 그리기 �� 과 복�� ¶

save()
- 그리기 �� 를 ��다.
- �� 그려�� 그래��나 ��는 �� 는다.
- ��는 �� 및 ��
  - �� 변�� 매��릭��
  - ��리��
  - strokeStyle
  - fillStyle
  - globalAlpha
  - lineWidth
  - lineCap
  - lineJoin
  - miterLimit
  - shadowOffsetX
  - shadowOffsetY
  - shadowBlur
  - shadowColor
  - globalCompositeOperation
  - font
  - textAlign
  - textBaseline
- restore()
  - 그리기 �� 를 복��다.
  - save()로 �� 는 �� 고 restore()를 ��때��다 �� 부�� 를 ��러��다.

2.10. ��로 그리기 ¶

ImageData�� 객��를 �� 맵 ��미��를 �� 단��로 �� 다.
ImageData��
- width
- height
- data
  - �� 데��를 나��내는 ��(0~255)로 ��루�� 1�� 배��.
  - 배�� 4개�� 값�� 묶��로 1�� 가�� 보(R, G, B, Alpha)를 나��낸다.

2.11. ��미��를 URL로 ��기 ¶

��가 가�� toDataURL()�� 내�� URL로 �� 다.
toDataURL(type)
- 그리기 ��가 ��고 ��가 가�� 메��드��다.
- type
  - ��미�� 딩 방법�� MIME ��로 ��다.
  - 기본값�� 'image/png'��다.
  - 'image/jpeg'�� 두�� 로 ��(0.0~1.0)를 �� 미�� 다.

2.12. ��메�� ¶

�� 격��로 �� 를 다�� 그리는 방법��로 ��메�� 구�� 다.

3. �� ¶

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 �� 드

html5/canvas

Contents

1. ��������? ¶

2. ������ 방법 ¶

2.1. ���각��� 그리기 ¶

2.2. ���미��� ������ ¶

2.3. 복������ ������나 ����� 그리기 ¶

2.4. ��������� ������ ¶

2.4.1. ��� ��������� ������ ¶

2.5. 그림��� ���과 ¶

2.6. ��������� 겹��� 때��� 동��� ¶

2.7. ��������� ������ ¶

2.8. 그래��� 변��� ¶

2.9. 그리기 ������������ ������ ������과 복��� ¶

2.10. ������로 그리기 ¶

2.11. ���미���를 URL로 ���기 ¶

2.12. �����메������ ¶

3. ������ ¶

4. ���고 ���료 ¶

1. ��? ¶

2. �� 방법 ¶