[BROWSER]Canvas

HTML의 canvas 태그와 JS를 활용하여 다양한 그래픽 요소 생성 가능

<canvas id="canvas">
  캔버스를 지원하지 않는 브라우저에서 태그 사이 내용이 표시
</canvas>

const canvas = document.querySelector("#canvas");

너비, 높이 설정부터, 기본값은 300*150

설정방법 1

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

픽셀로만 인식

설정방법 2

canvas.style.width = "30vw";
canvas.style.height = "30vh";

// 화면 크기에 맞게 설정하기
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

canvas.width = window.innerWidth * 0.3;
canvas.height = window.innerHeight * 0.3;
// 화면 크기에 비례하게

캔버스의 크기가 고정되어있지 않은 경우 유용

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

---

만들어보기

const canvas = document.querySelector("#canvas");
const box = canvas.getContext("2d");

ctx.fillStyle = "blue"; // 채우기 색
ctx.fillRect(10, 10, 100, 100); // 채우기 좌표
// 채워진 사각형

ctx.lineWidth = 5; // 선 굵기
ctx.strokeStyle = "black"; // 선 색상
box.fillRext = (10, 10, 100, 50); // 선 좌표
// 선 사각형

ctx.clearRect(20, 20, 80, 30); // 이 좌표는 이제 흰색입니다.
// 선과 충돌하면 선이 이동함 이상하다

---

캔버스로 클릭이벤트

화면상 마우스 위치

• X좌표 - event.clientX
• Y좌표 - event.clientY

화면상 캔버스 위치

• X좌표 - ctx.canvas.offsetLeft
• Y좌표 - ctx.canvas.offsetTop

화면에서의 마우스 위치에서 화면에서의 캔버스 위치를 빼면 마우스 좌표

혹은 event.offsetX , event.offsetY

ctx.fillRect(x - 15, y - 15, 30, 30);

canvas.onclick = function (event) {
  const x = event.clientX - ctx.canvas.offsetLeft; // 혹은 event.offsetX
  const y = event.clientY - ctx.canvas.offsetTop; // 혹은 event.offsetY

  ctx.fillRect(x - 15, y - 15, 30, 30);
  // 30픽셀*30픽셀 크기

  // 이 때, x, y를 그대로 전달하면 해당 좌표부터 사각형이 시작되어 어색한 느낌을 줍니다.
  // 클릭한 위치를 사각형의 정중앙이 되게 하려면 사각형크기/2 한 만큼 좌표에서 빼주면 됩니다.
  // 따라서 x - 15, y - 15 를 전달합니다.
};

원을 만들어보자

canvas.onclick = function (event) {
  ctx.beginPath();
  ctx.arc(event.offsetX, event.offsetY, 50, 0, 2 * Math.PI, false);
  ctx.fillStyle = "black";
  ctx.fill();
  ctx.lineWidth = 1;
  ctx.strokeStyle = "red";
  ctx.stroke();
};

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

https://deepu.tech/memory-management-in-v8/