[HTML5] CANVAS

CANVAS

• 표준화된 그래픽 인터페이스
• 사각형이나 원, 다각형 등 단순한 도형을 그릴 수 있다.
• 캔버스를 직접 사용하는 것은 매우 어렵고 손이 많이 가기 때문에, 일반적으로 라이브러리(PaperJS, KineticJS, EaselJS 등)를 많이 쓴다.

PaperJs

1. PaperJs CDN 라이브러리 링크 추가 (Line 10)

* 습관들이기 (링크 순서)

- <script>는 body 마지막에 추가 : head의 복잡도 줄이기 + 자바스크립트 성능 향상

- 웹 개발에서 제이쿼리가 빠지는 일은 거의 없으므로 제일 먼저 추가.

- Line 12 : main.js 에서 제이쿼리와 paper.js 둘다 사용할 것이기 때문에 아래와 같은 순서로 링크 추가.

2. 

Line 4 : Paper.js를 전역 스코프에 설치

Line 5 : Paper.js를 캔버스오 연결하고 Paper.js가 그림을 그릴 수 있도록 준비

Line 7 : Paper.js가 실제로 화면에 그림을 그리라는 명령.

Line 9 : 원객체를 만들고, 객체를 만들기 위해 매개변수 세 가지를 받습니다. "x좌표/y좌표/원의반지름"

* 활용