html5/canvas

Contents

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.0323 sec