Canvas Dojo - HTML5 Canvas를 공부하는 가장 쉬운방법

HTML5의 Canvas기능을 이용하면, CSS만으로는 구현하기 힘든 다양한 창작물을 구현할 수 있습니다.

하지만 구현은 생각보다 귀찮고, 쉽지 않죠..

 

- 30,000 Particles by Justin Windle

---

Vscode에서 Canvas를 공부하는데 좋은 툴을 소개합니다.

Canvas Dojo - Arthur Kim

Canvas Dojo - Visual Studio Marketplace

설치방법

- Vscode 에서 Extention에서 Canvas Dojo를 검색해서 install 하면 설치 완료!

---

사용방법

1. 코드 작성을 위한 javascript 파일 만들기.

 

2. Snippet을 이용하여 Boilerplate 불러오기.

- "canvas: "로 타이핑 하면 여러 리스트들이 나오는 것중에 원하는것 선택

 

3. Webview로 테스트하기

1. Hit⌘ Command+⇧ Shift+p
2. Run Canvas Preview

4. Debugging하기

1. Hit⌘ Command+⇧ Shift+p
2. Run Open Webview Developer Tools

   ---

왜? / 언제?

1. Javascript 파일 하나만으로 개발 하고 싶을때

 

Canvas의 높은 자유도에 매료되서 공부하려고, 몇가지 프랙티스를 따라하다 보니
매번 Canvas를 만들 때마다 index.html, style.css, app.js 등등 만들고, 초기 설정 잡고,
requestAnimationFrame으로 시작하는 공통부분을 몇번씩 만드는 나를 발견할 수 있었습니다...

 

물론 기본 설정 하는것만으로도 배우는 것이 있겠지만서도,
몇번씩 반복해서 복붙하는 것만으로도 이미 지쳐버리는 상황..

 

이럴때 Canvas Dojo의 Canvas Preview를 사용하면 js파일 하나만으로도 개발 가능해서 한결 편합니다.

---

2. 생각난 것이 있는데, 어떻게 개발할지 막막할 때

 

그리고 Canvas로 작업하다보면, 평소 개발할 때는 잘 쓰지 않는 프레임, 수식, 물리공식등등 으로 막막..

Canvas가 주는 한계성 없는 자유도 만큼이나 원하는 것을 구현하기란 좀처럼 쉽지 않다...

하지만 유투브 세상의 많은 선생님들은 언제나 답을 가지고 있죠 :)

 

그렇게 찾아본 수많은 예시들.....

 

다행이도 그렇게 찾은 대부분의 프렉티스들이 비슷한 형태를 가진다는 것을 발견했고,

이를 정리해서, 불러와서 작업하면 할만 할지도 모르겠다라고 생각했습니다.

 

좋은 프렉티스들( 기본, 중력, 충돌, 사인파도 등.. ) 을 모아서 Snippet ( Short Cut )으로 제공하여,

목표하는 작업에 집중할 수 있습니다.

 

---

Boilerplate Template Referencse Lists

 

HTML5 Canvas Tutorials for Beginners | Become a Canvas pro - Chris Course

- 2017년도 부터 연재한 HTML5 Canvas Tutorials for Beginners | Become a Canvas pro 시리즈는 Canvas 코딩의 시작이 되는 Bolierplate Template을 작성하는 것부터 Gravity, Collision Detection등 Canvas 코딩에 많이 사용되는 예시들을 가이드 해줍니다.