[javascript] 터치 이벤트를 사용하여 터치 인식하여 그림 그리기 기능을 구현하는 방법은?

12 Dec 2023

javascript

웹 애플리케이션에서 터치 이벤트를 사용하여 사용자의 터치 입력을 감지하고, 이를 활용하여 그림 그리기 기능을 구현할 수 있습니다. 아래는 간단한 방법을 제시합니다.

1. 터치 이벤트 리스너 추가

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

let isDrawing = false;

canvas.addEventListener('touchstart', (e) => {
  isDrawing = true;
  const touch = e.touches[0];
  context.beginPath();
  context.moveTo(touch.clientX - canvas.offsetLeft, touch.clientY - canvas.offsetTop);
});

canvas.addEventListener('touchmove', (e) => {
  if (isDrawing) {
    const touch = e.touches[0];
    context.lineTo(touch.clientX - canvas.offsetLeft, touch.clientY - canvas.offsetTop);
    context.stroke();
  }
});

canvas.addEventListener('touchend', () => {
  isDrawing = false;
});

2. 그리기 기능 추가

// 색상 및 선 속성 설정
context.lineWidth = 5;
context.strokeStyle = '#000000';

// 기본 설정 추가: 이 부분에서 색상 변경, 선 굵기 조절 등 사용자 설정을 받아서 적용 가능

// 취소 기능 추가
document.getElementById('undoButton').addEventListener('click', () => {
  context.clearRect(0, 0, canvas.width, canvas.height);
});

위 코드를 통해, 사용자의 터치 이벤트를 감지하고, 이를 기반으로 그림을 그릴 수 있습니다. 또한, 그리기 기능 외에도 선 색상 변경 및 취소 기능을 추가할 수 있습니다.

참고 자료

MDN Web Docs: Touch events