"# JavaScript 30" 강의 - 08. Fun with HTML5 Canvas

CarpediemMementomori 2020. 10. 8. 12:48

학습일자

2020.10.08

- Canvas API

: <canvas>..</canvas> 를 이용하여, 웹 에서 그림 그리기 등을 할 수 있음

: 처음에 var ctx = canvas.getContext("2D") 메소드를 가져와서, 여러가지 그리기 함수를 사용할 수 있음

캔버스(Canvas) 기본 사용법

canvas는 처음에는 src 및 alt 속성이 없다는 점만 제외하면 img 요소처럼 보입니다. 실제로 canvas 요소에는 width와 height의 두 속성만 있습니다. 이것들은 모두 선택사항이며 DOM 프로퍼티를 사용하여

developer.mozilla.org

- moveTo(x, y)

: 실제로 어떤 것도 그리지 않지만 위에서 언급한 경로의 일부가 되는 함수, 가장 유용한 함수 중 하나

: lineTo 등으로 그리기 전에 그리기 시작점을 이동(디폴트는 0, 0에 있음)

- lineTo(x, y)

: 현재의 드로잉 위치에서 x와 y로 지정된 위치까지 선을 그림

: 선의 끝점의 좌표가 되는 x와 y의 두개의 인자가 필요/ 시작점은 이전에 그려진 경로에 의해 결정 되며, 이전 경로의 끝점이 다음 그려지는 경로의 시작점이 됨/ 또한. 시작점은 moveTo() 메소드를 통해 변경될 수 있음

-stroke()

: 선 그리기

- e.offsetX or Y 속성은 타겟 element에 대한 상대적인 마우스 커서의 위치를 반환

- 처음 시작점을 마지막 끝난점(e.offsetX or Y 값)으로 할당하는 작업이 있어야, 실제 그림 그리듯 그릴 수 있음