[노마드코더] 바닐라 JS로 그림판 만들기 #Canvas

canvas

• html5 의 한 요소로 context를 가짐 (요소안에서 픽셀에 접근할 수 있음)
• 2개의 사이즈를 가져야 함(CSS사이즈, pixel modifier(실제픽셀사이즈))
• strokeStyle( ) : 기본색
• lineWidth( ) : 선의 너비
• beginPath( ) : 클릭하지 않을 때 선을 만듦 => 경로생성
• moveTo(x,y) : x,y 좌표로 path를 옮김 => 선 시작 좌표
• lineTo(x,y) : 이전 위치에서 지금 위치까지 선을 만듦 => 선 끝 좌표
• stroke( ) : 선을 그음 - 마우스를 움직이는 내내 발생 => 선 그리기

 

 

* Canvas MDN

https://developer.mozilla.org/ko/docs/Web/API/Canvas_API