[자바스크립트] moveTo() lineTo()란? 사각형, 삼각형, 집 그리기 / 바닐라JS 그림 앱 만들기 / #1.3 #1.4

ctx.rect()도 shorcut function 이었다. rect보다 더 기본적인 기능인 moveTo와 lineTo를 활용해서 사각형을 그릴 수 있다.

그림판으로 그림을 만들려면 가장 작은 단위의 함수를 사용해야한다.

moveTo(x, y): 브러쉬를 단순 이동 시켜준다.
lineTo(x, y): 선을 그으며 이동한다. *다만 stroke()나 fill()을 사용해야만 선이 나타나거나 윤곽이 보인다.

 

html과 css 코드는 이전 글과 같다. 아래 링크참조.

2022.11.02 - [IT/javascript] - [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / canvas에서 사각형 그리는 순서

[javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / canvas에서 사각형 그리는 순서

 

 

 

---

사각형 그리기

 

app.js

const canvas = document.querySelector("canvas"); /** canvas라는 변수는 html의 canvas라는 엘리먼트를 지정한다 */

const ctx = canvas.getContext("2d"); /** 2d로 그릴 것을지정 ctx는 canvas에 그림 그릴 때 쓰는 것  */
canvas.width = 800;
canvas.height = 800;

ctx.moveTo(50, 50); /** 선을 긋지 않고 이동 */
ctx.lineTo(150, 50); /** 선을 그으면서 이동 */
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.lineTo(50, 50);
ctx.stroke(); /** 선 나타내기 */
ctx.fill(); /** 채우기 */

 

 

결과

 

 

 

---

 

집 그리기 (삼각형 그리기 포함)

 

app.js

const canvas = document.querySelector("canvas"); /** canvas라는 변수는 html의 canvas라는 엘리먼트를 지정한다 */

const ctx = canvas.getContext("2d"); /** 2d로 그릴 것을지정 ctx는 canvas에 그림 그릴 때 쓰는 것  */
canvas.width = 800;
canvas.height = 800;

ctx.fillRect(200, 200, 50, 200); /** 왼쪽 벽 */
ctx.fillRect(400, 200, 50, 200); /** 오른쪽 벽 */
ctx.fillRect(300, 300, 50, 100); /** 문 */

ctx.fillRect(200, 200, 200, 20); /** 천장 */
ctx.moveTo(200, 200); /** 지붕: 삼각형 그리기 */
ctx.lineTo(325, 100);
ctx.lineTo(450, 200);
ctx.fill();

*fillReact(x, y, 폭w, 높이h): x, y 이동하여 w, h 크기를 가진 사각형을 그리고 그 안을 채운다.

 

결과

집 완성

 

 

 

2022.02.03 - [먹부림/해먹은 것들] - 수확한 돌배로 담근 돌배주 개봉! 시음 후기 / 돌배술 맛 / 설날 개봉

수확한 돌배로 담근 돌배주 개봉! 시음 후기 / 돌배술 맛 / 설날 개봉

2022.10.19 - [일상과 취미/식생활] - 22년 강원도 인제 돌배 수확/판매시작 (10월 중순~)

22년 강원도 인제 돌배 수확/판매시작 (10월 중순~)