[노마드코더] 바닐라 JS로 그림 만들기 - moveTo and lineTo

https://nomadcoders.co/javascript-for-beginners-2

바닐라JS로 그림 앱 만들기 – 노마드 코더 Nomad Coders

fillRect()

- fill() + rect()

- 직사각형을 만들고 색을 채움

 

rect()

- moveTo() + lineTo()

 

moveTo(x, y)

- (x, y) 좌표로 이동

- 선을 긋지 않으면서 이동만 해줌

 

lineTo(x, y)

- 마지막 지점에서 (x, y) 좌표만큼 선으로 연결

- 선을 그르면서 이동

 

//한 변의 길이가 100인 꽉 찬 정사각형

ctx.moveTo(50, 50); // (50, 50)으로 이동
ctx.lineTo(150, 50); // (50, 50)에서 (150, 50)까지 선으로 연결
ctx.lineTo(150, 150); // (150, 50)에서 (150, 150)까지 선으로 연결
ctx.lineTo(50, 150); //(150, 150)에서 (50, 150)까지 선으로 연결
ctx.lineTo(50, 50); // (50, 150)에서 (50, 50)까지 선으로 연결
ctx.fill(); // 채우기