캔버스에 그리는 자바스크립트 마우스 👨‍🎨

오늘은 캔버스에 마우스로 그리는 방법을 확인하면서 캔버스 탐색을 계속하고 싶었습니다.

실제로 상당히 간단하고 구현하기 쉽습니다!

우리는 이 멋진 그림 앱을 만들 것입니다. (놀아라!)

HTML 구조

HTML 더 간단할 수 없습니다. 필요한 것은 하나의 큰 캔버스입니다.

<canvas id="canvas"></canvas>

앱 스타일링

스타일링에 관해서는 기본 여백을 제거하고 멋진 emoji cursor 을 만들고 너비/높이를 viewport 과 같은 크기로 설정하기만 하면 됩니다.

* {
  margin: 0;
  padding: 0;
cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>✍️</text></svg>") 16 0,auto;
}
canvas {
  width: 100vw;
  height: 100vh;
}

JavaScript 마우스로 캔버스에 그리기

이제 재미있는 부분JavaScript으로 넘어가서 마우스 움직임을 캔버스에 연결합니다.

변수를 정의하는 것으로 시작하겠습니다.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let coord = { x: 0, y: 0 };

캔버스가 필요하고 ID를 기반으로 검색합니다.
그런 다음 컨텍스트(실제로 그림을 그리는 위치)를 얻습니다.

그런 다음 기본 좌표를 정의합니다.

이제 다음에 대한 리스너를 연결해 보겠습니다.

mousedown (그림 등록 시작

마우스 업(그림을 중지)

크기 조정(캔버스 크기 조정)

document.addEventListener("mousedown", start);
document.addEventListener("mouseup", stop);
window.addEventListener("resize", resize);

크기 조정 기능부터 시작하겠습니다. 이 기능은 뷰포트를 기반으로 캔버스 크기를 조정합니다. 캔버스를 100% 또는 너비와 높이로 만듭니다.

이 함수도 바로 호출합니다.

function resize() {
  ctx.canvas.width = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
}

resize();

마우스다운(시작) 기능을 정의해 보겠습니다.

function start(event) {
  document.addEventListener("mousemove", draw);
  reposition(event);
}

이 함수는 mousemove에 대한 리스너를 호출하므로 계속 들을 필요가 없습니다.
그런 다음 마우스 위치를 등록하는 재배치 기능을 호출합니다.

위치 변경 기능은 다음과 같습니다.

function reposition(event) {
  coord.x = event.clientX - canvas.offsetLeft;
  coord.y = event.clientY - canvas.offsetTop;
}

정지 기능을 켜십시오.

function stop() {
  document.removeEventListener("mousemove", draw);
}

우리는 레지스터 mousemove 함수에 대한 수신을 중지하기만 하면 됩니다.

우리가 만들 마지막 기능은 무승부입니다. 이것은 실제로 캔버스에 선을 만듭니다.

function draw(event) {
  ctx.beginPath();
  ctx.lineWidth = 5;
  ctx.lineCap = "round";
  ctx.strokeStyle = "#ACD3ED";
  ctx.moveTo(coord.x, coord.y);
  reposition(event);
  ctx.lineTo(coord.x, coord.y);
  ctx.stroke();
}