# 서울숲_K_Day12

## 0. 참석자

- 이해나, 지대철, 신정수, 고경표

## 1. 코드 동작 이해

### @지대철

- 기능을 함수별로 나누어서 구현
- canvas 에 사진을 덮어씌우면 렌더링도 느리고 용량을 많이 차지한다.
- 기존 사진에 덮어씌우는 방식으로 해결
- 화살표 만들 때 배열에 좌표를 담고 forEach를 통해 생성
- 사진 삽입할 때 canvas.toBuffer() 사용
- base64에 대한 인코딩/디코딩을 자동으로 처리해준다.

### @이해나

- `translate` 상대좌표를 이용하여 도형 그림
- 얼굴(원)을 기준으로 작성(중점 0,0)
- step별로 새로운 코드를 작성
- canvas의 동작 원리를 잘 이해하고 계신 것 같다.
- 그라데이션 구현이 완벽하다.

### @신정수

- 그리는 단계를 함수로 만들어서 실행
- 명화를 추가할 때 가로길이, 세로길이중 가장 큰 것을 기준으로 하여 비율을 맞춰서 출력
- 여백 부분을 흰색으로 출력
- translate를 사용하지 않고 절대좌표로 모두 확인
- JSDoc 연습

### @고경표

- 기존 코드를 수정해가면서 이미지 파일을 저장하는 방식으로 작성
- base64를 따로 buffer에 담아서 저장하였음
- 모듈에서 제공하는 코드를 직접 구현하시는 모습이 인상깊었다.
- rest 파라미터를 적극적으로 활용하시는 모습이 보기좋았다.

## 2.코드 동작 개선

- util 만들 수 있는 함수를 따로 빼서 정리
- prototype으로 모듈화시키는 것이 더 좋을 것 같다.
- CanvasRenderingContext2D

CanvasRenderingContext2D.prototype.drawLine = function(sx, sy, ex, ey) {
     this.beginPath();
     this.moveTo(sx, sy);
     this.lineTo(ex, ey);
     this.stroke();
}

function draw() {
     ctx.drawLine(10, 10, 300, 150);
}
// 이렇게 하면 컨텍스트에 메서드가 추가되어 기존의 메서드와 동일한 방법대로 사용할 수 있다.
// 마치 drawLine이라는 메서드가 원래 컨텍스트에 있었던 함수처럼 호출할 수 있다.
// 캔버스는 원자적으로 꼭 필요한 메서드만 제공하며 편의 메서드가 별로 없으므로, 필요하다면 이 방식으로 컨텍스트를 확장하면 된다.

- class를 이용하여 얼굴, 몸, 다리를 객체의 관점에서 상속받는다.
- 기존 코드는 기존에 그려놓은 화면을 덮어쓰기로 수정하면서 진행했지만,
- 하나의 그림을 만들 때마다 새롭게 시작하는 것이 canvas의 장점을 살리는 것 같다.

## 3.Consideration

### 3-1. 스스로 확인할 사항
- CANVAS API 종류들에 대해 학습하고 정리한다.
- method

|종류|기능|
|---|---|
|createCanvas()| cavas 생성 |
|strokeStyle| 윤곽선 모양 |
|fillStyle| 채우는 방법(그라데이션, 색상(rgba, rgb 등)) |
|beginPath()| 새로운 경로 시작 |
|closePath()| 폐쇄 곡선 |
|arc()| 호를 그린다 |
|addCoolorStop()| 그라데이션 색상 정보 추가 |
|fillRect()| 채워진 직사각형 그리기 |
|translate()| 원점 이동 |
|font| 글자 속성 (굵기 크기 폰트 순서) |
|fillText()| 글자 쓰기 |
|drawImage(img, x, y)| 지정된 위치에 이미지 저장 (특정 부분만 잘라서 붙여넣을 수 있음)|
|restore()| 속성 복구 |
|save()| 속성 저장 (선 속성, 그림자, 조합모드, 변환, 클리핑,포트 및 텍스트 정렬), stack형태로 저장|
|rotate(r)| 회전 |
|createLinearGradient(x1,y1,x2,y2)|(x1,y1)->(x2,x2) 으로의 그라데이션 |
|lineTo()| 지정된 위치까지 선을 그림 |
|fill()| closePath()를 포함하여, 채우기 |
|stroke()| 선 |
|moveTo()| 연필을 떼고 경로 이동(시작 좌표) |
|setLineDash()| 점 직선 |

- Canvas API를 활용한 라이브러리
- [EaselJS](https://www.createjs.com/easeljs)
- [Fabric](http://fabricjs.com/)
- [heatmap](https://www.patrick-wied.at/static/heatmapjs/)
- [Konva](https://konvajs.org/)
- [p5](https://p5js.org/)
- [Paper](http://paperjs.org/)
- [Phaser](https://phaser.io/)
- [Processing](http://processingjs.org/)
- [Pts](https://ptsjs.org/)
- [Rekapi](https://github.com/jeremyckahn/rekapi)
- [ZIM](http://zimjs.com/)

- 참고
- https://www.w3schools.com/html/html5_canvas.asp
- https://developer.mozilla.org/ko/docs/Web/HTML/Canvas

### 3-2. 다같이 확인할 사항
#### TODO1) SVG 개념에 대해 학습하고 CANVAS 2D API와 비교해서 정리한다.
**SVG 란?** Scalable Vector Graphics의 줄임말로, 마크업 언어를 가지고 벡터를 기반으로 그래프를 그린다.

- 벡터 기반의 그래픽은 각 요소의 좌표를 조합하여 그림을 그리게 된다.
- 작은 데이터로도 도형을 그릴 수 있으며, 해상도가 바뀌거나 도형을 확대하더라도 선이 깨끗하게 표시되는 장점이 있다.
- 복잡한 도형은 계산해야 하는 좌표의 수가 많아서 처리하는데 시간이 많이 걸릴 수 있다.

**Canvas와 SVG의 차이점**

| |Canvas|SVG|
|---|---|---|
|기반|픽셀(pixel) 기반|모양(shape) 기반|
|이미지 처리 방식|Bitmap|Vector|
|DOM|DOM 존재하지 않음(DOM Control 불가)|존재함(Script 로 Control 가능) |
|수정|스크립트(script)를 통해서만 수정할 수 있음.|스크립트(script) 및 CSS를 통해서도 수정할 수 있음.|
|적합한 서비스|그래픽이 주작업인 게임|렌더링 영역이 넓고, 매우 세밀한 해상도를 지원하는 UI 및 Application|
|성능|높은 해상도의 이미지를 사용하면 성능 저하|이미지가 복잡해질수록 Markup 이 복잡해져 성능이 저하

#### TODO2) 다양한 이미지 파일 포맷에 대해 학습하고 정리한다.
- BMP (비트맵)
- 주로 원본 보관용으로 보관하여 파일 포맷을 변환할 때 사용
- 원본 화질이 우수하지만 용량이 크고 웹브라우저마다 제한이 있다는 단점 존재
- 레이어와 알파 채널을 지원하지 않는다.
- JPEG(*JPG)
- 웹상 및 멀티미디어 환경에서 가장 널리 사용되고 있는 포맷
- RGB 이미지의 모든 컬러 정보를 유지
- 투명 이미지를 지원하지 않으며 압축률을 높일수록 이미지의 질이 손상
- CMYK모드, RGB모드 지원
- GIF
- 최대 256색까지 저장할 수 있는 비손실 압축 형식
- 하나의 파일에 여러 비트맵을 저장해 다중 프레임 애니메이션을 구현할 수 있음.
- 투명 이미지를 지원하지만 8비트 256컬러로 제한됨.
- 온라인 전송을 위해 만든 그래픽 포맷
- LZW압축 알고리즘 사용 (넓은 영역에서 한색을 사용하면 압축률이 높아진다)
- PNG
- GIF와 JPEG의 장점을 합친 파일 포맷
- 비손실 압축방식으로 원본 손상없이 파일 크기를 줄여줌.
- 이미지의 모든 컬러정보를 보존하고 있어 포토샵에서 활용하기 좋고, JPG보다 문자 혹은 날카로운 경계를 뚜렷하게 표현
- JPG와 GIF보다 용량이 크고 애니메이션을 만들 수 없다는 단점 존재
- RAW
- 원본 그대로의 정보를 가지고 있는 파일 포맷
- 무손실

##### 벡터 방식 vs 비트맵 방식
- 벡터 방식은 자유롭게 확대하거나 축소해도 해상도에 영향을 받지 않고 용량도 많이 늘어나지 않지만, 사진이나 이미지처럼 정교한 그래픽 표현에는 한계가 있다.
- 많은 픽셀로 정교하고 다양한 색상을 가진 이미지를 만들 수 있으나, 이미지를 확대하고 축소할 때 이미지 품질 저하와 깨짐 현상이 발생.
- 참고 : https://blank2.tistory.com/7?category=730409

- canvas 를 쓰는 이유
- flash는 성능이 무겁고, css를 구현하기에는 어려움이 있어서 canvas를 통해 구현이 가능하다.
- 참고 링크: https://d2.naver.com/helloworld/1899560