DEVLOG

mesonia.tistory.com/70 HTML5 캔버스(Canvas)기초, 캔버스로 그림판만들기 눈으로 보여지는걸 만드는게 좋아서 선택한 길이다보니 이왕 하는거 제대로 만들어보자!하는 생각이 들었다. 그래서 인터렉티브한 웹을 만드는데 기본이 되는 html5 캔버스에 대해서 공부해보려 mesonia.tistory.com ○ Interaction 지금까지 공부해본 것들을 이용해서 하나의 예제를 따라해보았다. flow 먼저 캔버스로 하나의 네모박스를 그리고 박스가 오른쪽으로 이동하도록 하고 박스가 오른쪽에 닿으면 다시 왼쪽에서 나타나도록 설정하고 정상적으로 움직이면 오른쪽으로 이동하는 값, 가장 처음에 위치할 x, y좌표를 랜덤으로 주고 박스를 클릭하는 것을 인지하도록 클릭이벤트를 추가한 후 하나의 박스를..

눈으로 보여지는걸 만드는게 좋아서 선택한 길이다보니 이왕 하는거 제대로 만들어보자!하는 생각이 들었다. 그래서 인터렉티브한 웹을 만드는데 기본이 되는 html5 캔버스에 대해서 공부해보려고한다. 사실 빠르게 이미 만들어진 예제의 코드를 분석해고 이것저것 해볼까 했지만........... 그냥 기본부터 차근차근 쌓아나가기로 했다! Canvas API란? JavaScript와 HTML 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용됩니다. Canvas API는 주로 2D 그래픽에 중점을 두고 있습니다. WebGL API 또한 엘리먼트를 사용하며, 하드웨어 가속 2D 및 3D 그래픽을 그립니다. => 즉..