그림(1)

1.1 power of Canvas

• html엔 이거한줄만 넣음

<canvas></canvas> << canvas API

• css

canvas {
    width: 800px;
    height: 800px;
    border: 5px solid black;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

1.2 Paths

• ctx.beginPath(); // 이게 있어야 새로운 경로로 시작
• fillRect : shortCut Function임 (rect도 그럼)

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d"); // context : brush임
canvas.width = 800;
canvas.height = 800;

ctx.fillRect(50, 50, 200, 200); // x, y, w, h

ctx.rect(250, 250, 100, 100);
ctx.fill();

ctx.beginPath(); // 이게 있어야 새로운 경로로 시작
ctx.rect(350, 350, 100, 100);
ctx.rect(450, 450, 100, 100);
ctx.fillStyle = "red"; // 이땐 아직 색안바뀜
ctx.fill(); // 이거해야 바뀜 & fillRect제외 전부다바뀜

1.3 ctx.rect() 수동으로 하기

• moveTo : 마우스 움직이기
• lineTo : 선그리면서 마우스 움직이기

ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.lineTo(50, 50);
//ctx.stroke(); 선만긋기
ctx.fill();

1.4 집만들기

ctx.fillRect(200, 200, 50, 200);
ctx.fillRect(400, 200, 50, 200);

ctx.lineWidth = 2;
ctx.fillRect(300, 300, 50, 100);

ctx.fillRect(200, 200, 250, 20);

ctx.moveTo(200, 200);
ctx.lineTo(325, 100);
ctx.lineTo(450, 200);
ctx.fill();

1.5 원만들기

• arc()

https://www.w3schools.com/tags/canvas_arc.asp

ctx.fillRect(200, 200, 15, 100);
ctx.fillRect(365, 200, 15, 100);
ctx.fillRect(260, 200, 60, 200);

//(x, y, radius, startAngle, endAngle, counterclockwise?)
ctx.arc(290, 150, 50, 0, 2 * Math.PI);
ctx.fill();

ctx.beginPath();
ctx.fillStyle = "white";
ctx.arc(270, 135, 8, Math.PI, 2 * Math.PI);
ctx.arc(310, 135, 8, Math.PI, 2 * Math.PI);
ctx.fill();