[javascript] 드래그 앤 드롭 기능을 가진 웹 기반 그림판 예제 구현하기

29 Nov 2023

javascript

이번 예제에서는 자바스크립트를 사용하여 드래그 앤 드롭 기능을 가진 웹 기반 그림판을 구현해보겠습니다.

구현 전 준비사항

이 예제를 구현하기 위해서는 HTML, CSS, JavaScript의 기본적인 지식이 필요합니다. 또한, 아래의 코드를 웹 페이지에 포함해야 합니다.

<!DOCTYPE html>
<html>
<head>
  <title>웹 기반 그림판 예제</title>
  <style>
    #canvas {
      width: 500px;
      height: 500px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div id="canvas"></div>

  <script>
    // 여기에서 자바스크립트 코드를 작성합니다.
  </script>
</body>
</html>

그림판 구현하기

드래그 앤 드롭 이벤트를 사용하기 위해 mousedown, mousemove, mouseup 이벤트를 추가해줍니다. 마우스가 눌렀을 때(mousedown) 그림을 그리기 시작하고, 마우스를 움직일 때(mousemove) 그림을 업데이트하며, 마우스를 놓았을 때(mouseup) 그리기를 멈춥니다.

var isDrawing = false;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var prevX = 0;
var prevY = 0;

canvas.addEventListener('mousedown', function(event) {
  isDrawing = true;
  prevX = event.clientX - canvas.offsetLeft;
  prevY = event.clientY - canvas.offsetTop;
});

canvas.addEventListener('mousemove', function(event) {
  if (isDrawing) {
    var currX = event.clientX - canvas.offsetLeft;
    var currY = event.clientY - canvas.offsetTop;

    ctx.beginPath();
    ctx.moveTo(prevX, prevY);
    ctx.lineTo(currX, currY);
    ctx.stroke();

    prevX = currX;
    prevY = currY;
  }
});

canvas.addEventListener('mouseup', function(event) {
  isDrawing = false;
});

그림판의 스타일을 지정해줍니다. 여기에서는 선의 색깔, 굵기를 설정해주었습니다.

ctx.strokeStyle = 'black';
ctx.lineWidth = 5;

실행 결과 확인하기

위의 코드를 웹 페이지에 포함시킨 후, 브라우저에서 해당 페이지를 엽니다. 그 후, 마우스를 클릭하고 드래그하여 그림을 그릴 수 있습니다.

마무리

이번 예제에서는 자바스크립트를 사용하여 드래그 앤 드롭 기능을 가진 웹 기반 그림판을 구현해보았습니다. 이 예제를 통해 웹 개발에 필요한 기본적인 이벤트 처리와 그림 그리기 방법을 익힐 수 있을 것입니다.

더 자세한 내용은 링크를 참조해주세요.