Canvas 블로깅

Canvas

<canvas> 태그와 JS를 통해 도형, 데이터 시각화, 애니메이션, 웹 게임 등 다양한 콘텐츠를 만들 수 있습니다.

최근에 많아 핫한 게임 Vampire Survivors 또한 HTML, CSS, JS를 통해 만들었습니다.
PixiJS와 같은 2D 게임 엔진을 통해 쉽게 게임을 제작할 수 있습니다.

본론으로 돌아와 Canvas를 한번 만들어봅시다.

색칠하기

// html 파일
<canvas id="canvas">
  
</canvas>

// js 파일
const canvas = document.querySelector("#canvas");

const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 150); // (x좌표, y좌표, width, height)

주의점: fillStyle이 fillRect보다 위에 있어야 정상 작동한다.
fillStyle이 아래에 있는 경우, 오류가 나는 경우가 있다.

윤곽선

ctx.lineWidth = 5; // 도형의 윤곽선 두꼐
ctx.strokeStyle = "black"; //윤곽선 color
ctx.strokeRect(10, 10, 150, 150); //(x, y, width, height)

다양한 스타일

• 원 모양: ctx.arc(x,y, radius, startAngle, endAngle, anticlockwise)
• 삼각형

ctx.beginPath(); // 새로운 경로 생성
ctx.moveTo(60, 60);
ctx.lineTo(100, 60);
ctx.lineTo(100, 25);
ctx.closePath(); // 시작 부분과 연결할 직선을 추가 (없으면 삼각형이 만들어지지 않음)
ctx.stroke();

• 베지어(Bezier) 곡선과 이차(quadratic)곡선
• 이차 베지에 곡선 (말풍선 등 곡선으로 이루어진 도형을 그릴 수 있다.)

심화

• 다양한 스타일 조합하기
  
• 클릭 이벤트 구현

참조

https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes