TIL #7 | 23.10.21

JS에서 canvas 사용하기

1. html에 canvas 태그를 생성한다.
   <canvas />

2. js에서 생성한 canvas 요소의 속성을 지정한다.

• getContext(”2d”) : 2d 그림을 그릴 때 사용한다.
• ctx.rect() : 틀을 그린다. (틀만 그리면 아무것도 생성되지 않는다.)
• ctx.stroke() : 틀의 선을 그린다.
• ctx.fill() : 틀의 색을 채운다.
• ctx.fillRect, ctx.strokeRect를 사용하여 빠르게 사용이 가능하다

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d"); // 그림 그릴 때 사용
canvas.width = 800;
canvas.height = 800;

ctx.rect(50, 50, 100, 200); // x, y, 너비, 높이
ctx.stroke(); // 선을 그린다.
ctx.fill() // 안을 채운다.

다른 색을 채우기 위해서는 새로운 경로를 만들어야 한다. (그렇지 않으면 모든 요소의 색이 같이 변경된다.)

• ctx.beginPath() : 시작 경로 변경
• ctx.fillStyle : 채우기 스타일 지정

ctx.rect(50, 50, 100, 100);
ctx.rect(150, 150, 100, 100); // x, y, 너비, 높이
ctx.rect(250, 250, 100, 100); // x, y, 너비, 높이
ctx.fill(); // 안을 채운다.

ctx.beginPath(); // 새로운 경로를 만든다. (다른 색으로 지정하기 위해 필수)
ctx.rect(350, 350, 100, 100); // x, y, 너비, 높이
ctx.rect(450, 450, 100, 100); // x, y, 너비, 높이
ctx.fillStyle = "red";
ctx.fill();

영역을 이동하며 선을 그리는 방법

• moveTo: 영역 이동한다.
• lineTo: 선을 그린다.

ctx.moveTo(50, 50); // 영역 이동
ctx.lineTo(150, 50); // 선이 그려짐
ctx.lineTo(150, 150); // 선이 그려짐
ctx.lineTo(50, 150); // 선이 그려짐
ctx.lineTo(50, 50); // 선이 그려짐
ctx.stroke();

---

회고

오늘은 html의 canvas 요소를 사용하여 화면에 그림을 그리는 실습을 진행했다. JS로 canvas 안에 그림을 그려보면서 canvas를 제어하는 메서드를 알아보았다. 그림판과 같은 그림을 그려야하는 프로젝트에서 유용하개 사용할 수 있을 것 같다.