minstudio

Canvas API

웹상에서 그래픽을 표현하는 대표적인 두 가지 기술입니다. 특히 Canvas API는 자바스크립트를 사용해 동적인 그래픽을 그릴 때 핵심적인 역할을 합니다.

🎯

SVG vs Canvas 비교

  • SVG (벡터): 수학적 계산으로 그려져 확대해도 깨지지 않습니다. 로고나 아이콘에 적합합니다.
  • Canvas (비트맵): 픽셀 단위로 도화지에 색을 칠합니다. 게임 렌더링이나 복잡한 파티클 애니메이션에 매우 빠릅니다.

Canvas 좌표계 이해하기

Canvas의 기준점(0, 0)은 왼쪽 맨 위 모서리입니다. X축은 오른쪽으로, Y축은 아래쪽으로 값이 증가합니다.

(0, 0) X축 (+) Y축 (+) x:90, y:50 width: 120 height: 80

Canvas 주요 API 속성 및 메서드

  • getContext('2d') : 도화지(Canvas)에 그림을 그릴 수 있는 붓(Context 객체)을 가져옵니다.
  • fillStyle : 채우기 색상을 지정합니다. (예: "red", "#ff0000")
  • strokeStyle : 테두리(선) 색상을 지정합니다.
  • lineWidth : 선의 굵기를 지정합니다.
  • fillRect(x, y, w, h) : 지정된 좌표에 지정된 크기(w, h)로 색이 채워진 사각형을 그립니다.
  • strokeRect(x, y, w, h) : 테두리만 있는 사각형을 그립니다.
  • beginPath() : 새로운 선이나 도형을 그리기 위해 경로(Path)를 초기화합니다.
  • arc(x, y, r, startAngle, endAngle) : 원이나 호를 그립니다. 각도는 라디안(Radian) 단위를 사용합니다. (360도 = Math.PI * 2)
  • fill() / stroke() : 설정된 경로 내부를 채우거나 선을 긋습니다.
/* ==========================================
   [ 1. HTML & CSS 영역 ]
==========================================


<canvas id="myCanvas" width="300" height="300"></canvas>
========================================== */


// ==========================================
// [ 2. JavaScript 영역 ]
// ==========================================

// 1. Canvas 요소와 렌더링 컨텍스트(붓) 가져오기
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 2. 배경 사각형 그리기 (채우기)
ctx.fillStyle = "#1e293b"; // 어두운 남색
ctx.fillRect(0, 0, 300, 300); // 전체 캔버스 덮기

// 3. 테두리가 있는 사각형 그리기
ctx.lineWidth = 4;
ctx.strokeStyle = "#3b82f6"; // 파란색 테두리
ctx.strokeRect(50, 50, 200, 100); // 내부가 빈 사각형

// 4. 텍스트 그리기
ctx.fillStyle = "#f8fafc"; // 흰색 텍스트
ctx.font = "bold 20px Pretendard, sans-serif";
ctx.fillText("Canvas API 마스터!", 60, 110);

// 5. 원 그리기 (경로 사용)
ctx.beginPath(); // 새로운 경로 시작
// arc(x, y, 반지름, 시작각도, 종료각도) 
ctx.arc(150, 220, 40, 0, Math.PI * 2); 
ctx.fillStyle = "#ec4899"; // 핑크색
ctx.fill(); // 경로 내부 색상 채우기

// 6. 같은 경로에 테두리 추가하기
ctx.lineWidth = 3;
ctx.strokeStyle = "#fcd34d"; // 노란색 테두리
ctx.stroke(); // 핑크색 원 위에 노란색 테두리를 그립니다.
실행 결과
Canvas API | Minstudio