html5/canvas

Contents

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. ��메��

4. �� 료

1. ��? ¶

�� 롭�� 릴 �� 는 ��.
�� 높��.
IE를 �� 모�� 브��(?)�� 는 ��능. IE�� 면 Explorer Canvas, uuCanfas.js 등�� 브러리를 �� 능�� .

2. �� 방�� ¶

<canvas></canvas>

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

last modified 2021-02-07 05:31:41
Processing time 0.0329 sec