Canvas API 기초

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas API 기초</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }
        canvas {
            border: 2px solid #333; /* 캔버스 경계를 시각적으로 보여주기 위함 */
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="500" height="300">
        이 브라우저는 Canvas를 지원하지 않습니다.
    </canvas>

    <script src="canvas-script.js"></script>
</body>
</html>

// canvas-script.js
const canvas = document.getElementById('myCanvas');

// getContext() 메서드를 사용하여 렌더링 컨텍스트를 가져옵니다.
const ctx = canvas.getContext('2d');

// 캔버스가 정상적으로 초기화되었는지 확인
if (ctx) {
    console.log("2D 렌더링 컨텍스트를 성공적으로 가져왔습니다.");
    // 이제 ctx 객체를 사용하여 그림을 그릴 수 있습니다.
} else {
    console.error("이 브라우저는 Canvas 2D 컨텍스트를 지원하지 않습니다.");
}

// 선의 색상 설정
ctx.strokeStyle = 'blue';
// 선의 두께 설정
ctx.lineWidth = 5;

// 첫 번째 선: (50, 50)에서 (200, 50)까지
ctx.beginPath();       // 새로운 경로 시작
ctx.moveTo(50, 50);    // 시작점 이동
ctx.lineTo(200, 50);   // (200, 50)까지 선 그리기
ctx.stroke();          // 경로를 따라 선 그리기 (stroke)

// 두 번째 선: (200, 50)에서 (200, 150)까지
// beginPath()를 다시 호출하면 이전 경로와 독립적으로 그림
ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(200, 150);
ctx.stroke();

// 삼각형 그리기
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(300, 100);
ctx.lineTo(350, 200);
ctx.lineTo(250, 200);
ctx.closePath(); // 시작점으로 경로를 닫아 삼각형 완성
ctx.stroke();

// 채워진 사각형 (fillStyle 설정)
ctx.fillStyle = 'green'; // 채울 색상 설정
ctx.fillRect(50, 100, 100, 50); // (x, y, width, height)

// 윤곽선 사각형 (strokeStyle, lineWidth 설정)
ctx.strokeStyle = 'purple';
ctx.lineWidth = 3;
ctx.strokeRect(200, 100, 100, 50);

// 특정 영역 지우기
ctx.clearRect(70, 110, 60, 30); // 초록색 사각형의 일부를 지움

// 라디안 계산: Math.PI는 파이 (180도)
// 전체 원: 0부터 2 * Math.PI
// 반원: 0부터 Math.PI

// 채워진 원
ctx.fillStyle = 'orange';
ctx.beginPath();
ctx.arc(150, 230, 40, 0, 2 * Math.PI, false); // (x, y, 반지름, 시작각, 끝각, 반시계방향)
ctx.fill();

// 윤곽선 원
ctx.strokeStyle = 'darkblue';
ctx.lineWidth = 4;
ctx.beginPath();
ctx.arc(350, 230, 40, 0, 2 * Math.PI, false);
ctx.stroke();

// 반원 (파이차트 조각처럼)
ctx.fillStyle = 'lightblue';
ctx.beginPath();
ctx.moveTo(400, 50); // 중심점에서 시작
ctx.arc(400, 50, 40, 0, Math.PI, false); // 아래쪽 반원 (기본 canvas 좌표계)
ctx.closePath(); // 경로를 명시적으로 닫음 (fill은 열린 경로도 암묵적으로 닫아 채움)
ctx.fill();

ctx.fillStyle = 'black';
ctx.font = '30px Arial'; // 폰트 크기와 패밀리
ctx.textAlign = 'center'; // 수평 정렬
ctx.textBaseline = 'middle'; // 수직 정렬

// 캔버스 중앙에 텍스트 그리기
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;

ctx.fillText('Hello Canvas!', centerX, centerY);

ctx.strokeStyle = 'gray';
ctx.lineWidth = 1;
ctx.font = '20px Sans-serif';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.strokeText('Web Graphics', 10, 10);

// 채우기 색상: 빨간색
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 50, 50); // (0,0)에 빨간색 사각형

ctx.save(); // 현재 그리기 상태 저장 (채우기 색상: 빨간색)

ctx.fillStyle = 'blue'; // 새로운 상태: 파란색
ctx.fillRect(60, 0, 50, 50); // (60,0)에 파란색 사각형

ctx.save(); // 현재 그리기 상태 저장 (채우기 색상: 파란색)

ctx.fillStyle = 'green'; // 새로운 상태: 초록색
ctx.fillRect(120, 0, 50, 50); // (120,0)에 초록색 사각형

ctx.restore(); // 스택에서 가장 최근 상태 복원 (파란색)
ctx.fillRect(180, 0, 50, 50); // (180,0)에 파란색 사각형

ctx.restore(); // 스택에서 다음 상태 복원 (빨간색)
ctx.fillRect(240, 0, 50, 50); // (240,0)에 빨간색 사각형

body { margin: 0; padding: 16px; }
#responsive-canvas { display: block; outline: 1px solid #777; }
#canvas-status { overflow-wrap: anywhere; }

const canvas = document.getElementById('responsive-canvas');
const status = document.getElementById('canvas-status');
const ctx = canvas.getContext('2d');

function drawResponsiveCanvas() {
    if (!ctx) { status.textContent = '2D 그리기를 사용할 수 없습니다.'; return; }
    const width = Math.min(500, document.documentElement.clientWidth - 32);
    const height = 300;
    const dpr = window.devicePixelRatio || 1;
    canvas.style.width = `${width}px`;
    canvas.style.height = `${height}px`;
    canvas.width = Math.round(width * dpr);
    canvas.height = Math.round(height * dpr);
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    ctx.clearRect(0, 0, width, height);

    const scene = { x: width / 2, y: 200, radius: 40 };
    ctx.save();
    ctx.strokeStyle = '#166534';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(24, 100);
    ctx.lineTo(width - 24, 100);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(scene.x, scene.y, scene.radius, 0, Math.PI * 2);
    ctx.stroke();
    ctx.fillStyle = '#111827';
    ctx.font = '20px sans-serif';
    ctx.fillText('Canvas 연습', 24, 48);
    ctx.restore();
    status.textContent = `원 중심 (${scene.x}, ${scene.y}), 반지름 ${scene.radius}; CSS ${width}×${height}, 버퍼 ${canvas.width}×${canvas.height}`;
}

drawResponsiveCanvas();
window.addEventListener('resize', drawResponsiveCanvas);

function nextPosition(x, previousMs, nowMs, speed) {
    const seconds = Math.max(0, nowMs - previousMs) / 1000;
    return x + speed * seconds;
}
console.log(nextPosition(10, 1000, 1250, 40)); // 20