컴퓨터 프로그래밍 | [단원1] JS란? - 색칠하기

배경색 칠하기

background(x, y, z);

 

x = RGB 중 빨간색 값 (0 ~ 255)
y = RGB 중 초록색 값 (0 ~ 255)
z = RGB 중 파란색 값 (0 ~ 255)

위 명령어를 쓰면 전체 화면의 배경색을 지정함

주의 : 이 명령어를 맨 아래에 쓴다면?
→ 다른 요소들이 전부 배경색에 덮임 (자바스크립트는 코드 순서대로 기능을 적용)

 

특정 요소 색칠하기

fill(x, y, z);

x, y, z의 값은 위 background와 같음

fill 명령어는 이 다음에 나오는 요소의 색을 채워주는 기능

 

선의 색 & 두께 조정하기

stroke(x, y, z);

x, y, z의 값은 위 background와 같음

이 다음에 오는 line 명령어에 대한 선의 색을 설정해주는 기능 (선은 내부가 없으니 채운다는 개념X)

 

 

strokeWeight(x);

x = 해당 선의 두께

strokeWeight 명령어도 fill 명령어와 같은 원리로, 이 다음에 오는 line 명령어에 대한 두께를 처리

 

위 코드들을 응용하여 새로운 그림을 그려보자

background(64, 214, 255);

// The ground
fill(0, 255, 68);
rect(0, 300, 400, 100);

fill(102, 242, 155);

// The sun
ellipse(80, 64, 100, 100);  

// The snowman
fill(237, 237, 237);
ellipse(200, 300, 150, 150);
ellipse(200, 200, 100, 100);
ellipse(200, 120, 75, 75);