컴퓨터 프로그래밍 | [단원1] JS란? - 그리기 기본

자바스크립트를 이용하여 가장 기본인 원은 어떻게 그릴 수 있을까?

 

ellipse() 함수

 : 자바스크립트에서 원을 그리는 함수

ellipse(x, y, w, h)

 

괄호 안 각 숫자들의 의미는?

1. 첫 번째 숫자 x = 원이 화면의 왼쪽에서부터 얼마나 떨어져있는가? (왼 → 오 방향으로 이동)
2. 두 번째 숫자 y = 원이 화면의 위쪽에서부터 얼마나 떨어져있는가? (위 → 아래 방향으로 이동)
3. 세 번째 숫자 w = 원의 너비값 (작을수록 세로로 타원형, 클수록 가로로 타원형)
4. 네 번째 숫자 h = 원의 높이값 (얼마나 원 내부 위아래로 높게 할 것인지)

즉,

앞의 두 매개변수 → 원의 "위치"를 제어
뒤의 두 매개변수 → 원의 "크기"를 제어

 

위 내용을 활용하여 얼굴을 만들어보자

ellipse(200, 200, 270, 300);

ellipse(100, 80, 100, 100);
ellipse(300, 80, 100, 100);

ellipse(140, 180, 60, 60);
ellipse(260, 180, 60, 60);

ellipse(200, 280, 100, 0);

 

이제 더 응용하여 눈사람을 그려보자

// bottom circle:
ellipse(200, 300, 150, 150);

// middle circle:
ellipse(200, 190, 100, 100);

// top circle:
ellipse(200, 120, 60, 60);

 

그렇다면 사각형은 어떻게 추가할까?

 

rect() 함수

 : 사각형을 그리는 함수

rect(x, y, w, h)

 

괄호 안 각 숫자들의 의미는?

1. 첫 번째 숫자 x = 사각형의 왼쪽 위 모서리의 x값이 좌표 어느 지점에 위치해있는가? (왼 → 오 방향으로 이동)
2. 두 번째 숫자 y = 사각형의 왼쪽 위 모서리의 y값이 좌표 어느 지점에 위치해있는가? (위 → 아래 방향으로 이동)
3. 세 번째 숫자 w = 원의 너비값 (작을수록 세로로 타원형, 클수록 가로로 타원형)
4. 네 번째 숫자 h = 원의 높이값 (얼마나 원 내부 위아래로 높게 할 것인지)

주의할 점
 : x, y 값이 원의 함수인 ellipse()가 나타내는 것과 뜻이 다름 → 원에서 사각형으로 변형할 때 값 변경 필수!

 

line() 함수

 : 선을 그리는 함수

line(x1, y1, x2, y2)

 

괄호 안 각 숫자들의 의미는?

1. 첫 번째 숫자 x1 = 시작 점의 x 좌표값
2. 두 번째 숫자 y1 = 시작 점의 y 좌표값
3. 세 번째 숫자 x2 = 끝 점의 x 좌표값
4. 네 번째 숫자 y2 = 끝 점의 y 좌표값

 

맨 처음 그렸던 사람 얼굴을 사각형과 선을 이용하여 로봇 얼굴로 바꿔 다시 그려보자.

rect(76, 45, 250, 300); // face

rect(126, 250, 152, 60); // mouth

rect(140, 150, 30, 30); // left eye

rect(240, 150, 30, 30); // right eye

rect(175, 345, 50, 50); // neck

// unibrow
line(140, 129, 270, 129);

 

이번 수업에서 배운 내용을 전부 활용하여 최종적으로 "손을 흔드는 눈사람"을 제작해보자

rect(0, 350, 400, 60);

ellipse(200, 300, 150, 150);
ellipse(200, 200, 100, 100);
ellipse(200, 120, 75, 75);

line(160, 200, 100, 100);
line(240, 200, 300, 100);

 

중요

자바스크립트에서는 도형을 그리는 코드가 위에 있을수록 가장 아래에 위치
 = 큰 도형 아래에 작은 도형이 위치하여 안보일 수 있음!