[javascript] 터치 이벤트를 사용하여 터치한 위치에 도형을 그리는 방법은?

12 Dec 2023

javascript

다음은 간단한 예제 코드입니다.

// HTML
<canvas id="myCanvas" width="200" height="200"></canvas>

// JavaScript
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

canvas.addEventListener('touchstart', function(event) {
  // 터치한 위치 가져오기
  const touchX = event.touches[0].clientX - canvas.offsetLeft;
  const touchY = event.touches[0].clientY - canvas.offsetTop;

  // 도형 그리기
  ctx.fillStyle = 'red';
  ctx.fillRect(touchX, touchY, 20, 20);  // 예시: 20x20 크기의 사각형 그리기
});

이 코드는 <canvas>를 사용하여 터치 이벤트를 감지하고, 터치한 위치에 빨간색 사각형을 그리는 예제입니다. 필요에 따라 도형의 종류와 스타일을 변경할 수 있습니다.

이 예제를 참고하여 프로젝트에 맞게 캔버스와 터치 이벤트를 활용하여 원하는 도형을 그리실 수 있습니다.