2. 캔버스와 기본 도형, 색상 설정

 

1. 캔버스 생성

• createCanvas(width, height): 캔버스 크기를 설정합니다.

2. 기본 도형

• 원: ellipse(x, y, w, h) (중심 좌표와 폭, 높이)
• 사각형: rect(x, y, w, h) (좌측 상단 좌표와 폭, 높이)
• 선: line(x1, y1, x2, y2) (시작과 끝 좌표)
• 삼각형: triangle(x1, y1, x2, y2, x3, y3)

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220); // 배경 색 초기화
  rect(50, 50, 100, 100);  // 사각형
  ellipse(200, 200, 80, 80); // 원
  line(300, 100, 350, 300); // 선
}

 

3. 색상 설정

• background(r, g, b): 배경 색 설정 (RGB 값)
  • background(명도) 0 - 255
  • background(Red, Green, Blue) 0 - 255
  • background('색상단어') 문자열
  • background('#색상코드') hex code, 문자열
• fill(r, g, b): 도형 내부 색상 설정
• stroke(r, g, b): 도형 외곽선 색상 설정
• noFill(): 내부 색상 없음
• noStroke(): 외곽선 없음

function setup() {
  createCanvas(400, 400);
  background(255); // 흰색 배경
}

function draw() {
  fill(255, 0, 0);     // 빨간색
  rect(50, 50, 100, 100);

  fill(0, 255, 0);     // 초록색
  ellipse(200, 200, 80, 80);

  noFill();            // 내부 색 없음
  stroke(0, 0, 255);   // 파란색 외곽선
  rect(250, 250, 100, 100);
}