본 글에서는 'MDN - Canvas API'에 대한 내용을 정리하겠습니다.

Canvas API

Canvas API는 JavaScript와 HTML <canvas> 요소를 통해 그래픽을 그리기위한 수단을 제공합니다.

<canvas id="tutorial" width="150" height="150"></canvas>

• <canvas> 요소는 width와 height 속성을 가집니다.
• <canvas> 요소는 일반적인 이미지처럼 스타일을 적용시킬 수 있습니다.
  • ex) margin, border, background...
  • 하지만 실제 캔버스 위에 그리는 것에 영향을 끼치지 않습니다.

렌더링 컨텍스트

Rendering Contexts

<canvas> 요소는 고정 크기의 드로잉 영역을 생성하고 하나 이상의 렌더링 컨텍스를 노출하여, 출력할 컨텐츠를 생성하고 다루게 됩니다.

렌더링 컨텍스트 (Rendering Context)

• 무엇을 어떻게 그릴지 제어하는 자바스크립트 객체
• 메서드와 속성을 제공
• 대표 타입 : 2d, webGL

도형 그리기 그리기

직사각형

<canvas>는 오직 하나의 원시적인 도형, 직사각형만을 제공합니다.

• fillRect(x, y, width, height)
  • 색칠된 직사각형
• storkeRect(x, y, width, height)
  • 직사각형 윤곽선
• clearRect(x, y, width, height)
  • 특정 부분을 지우는 직사각형

const canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    const ctx = canvas.getContext("2d");

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }

경로 그리기

경로는 직사각형 이외의 유일한 원시적 도형입니다.

경로를 이용하여 도형을 만드는 단계
1. 경로 생성
2. 그리기 명령어를 통해 경로상에 경로를 그림
3. 경로가 한 번 만들어졌다면, 경로를 렌더링하기 이해서 윤곽선을 그리거나 도형 내부를 채울 수 있음

• beginPath
• moveTo
  • 펜을 x와 y로 지정된 좌표로 옮깁니다.
• lineTo
  • 현재의 드로잉 위치에서 x와 y로 지정된 위치까지 선을 그립니다.
• closePath
• stroke
• fill

const canvas = document.getElementById("canvas");
if (canvas.getContext) {
  const ctx = canvas.getContext("2d");

  ctx.beginPath();
  ctx.moveTo(100, 20); 
  ctx.lineTo(50, 100);
  ctx.lineTo(150, 100);
  ctx.fill();
}

성게 그리기 with GPT

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const centerX = canvas.width / 2;
const centerY = canvas.height / 2;

const spikeCount = 28;
const innerRadius = 100; // 동그라미 반지름
const spikeLength = 80; // 원뿔 (삼각형) 길이

for (let i = 0; i < spikeCount; i++) {
  const angle = (i / spikeCount) * 2 * Math.PI;

  const base1Angle = angle - 0.1;
  const base2Angle = angle + 0.1;

  const tipX = centerX + (innerRadius + spikeLength) * Math.cos(angle);
  const tipY = centerY + (innerRadius + spikeLength) * Math.sin(angle);

  const base1X = centerX + innerRadius * Math.cos(base1Angle);
  const base1Y = centerY + innerRadius * Math.sin(base1Angle);

  const base2X = centerX + innerRadius * Math.cos(base2Angle);
  const base2Y = centerY + innerRadius * Math.sin(base2Angle);

  // 삼각형(뿔) 그리기
  ctx.beginPath();
  ctx.moveTo(tipX, tipY); // 끝 점 (뾰족한 부분)
  ctx.lineTo(base1X, base1Y); // 원 경계 1
  ctx.lineTo(base2X, base2Y); // 원 경계 2
  ctx.closePath();
  ctx.fill();
}

// 가운데 동그라미
ctx.beginPath();
ctx.arc(centerX, centerY, innerRadius, 0, Math.PI * 2);
ctx.fill();

간단할 줄 알았는데, cos, sin 메서드를 사용해야 한다는 점이 당황스러웠습니다.
수학을 포기했었는데, 이제 다시 시작해야겠네요 ㅎㅎ