자바스크립트 canvas 그림판 만들기. 마우스 클릭시 선 긋기 moveTo, lineTo, stroke, offsetX, offsetY

이제 드디어 그림판의 가장 기본인 기능. 마우스 왼쪽 클릭시 선이 그어지는 기능을 구현한다.

 

 

이전글

2022.11.02 - [IT/javascript] - [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / canvas에서 사각형 그리는 순서
2022.11.03 - [IT/javascript] - [자바스크립트] moveTo() lineTo()란? 사각형, 삼각형, 집 그리기 / 바닐라JS 그림 앱 만들기 / #1.3 #1.4
2022.11.03 - [IT/javascript] - [자바스크립트] canvas 그림판 선 긋기, 점 찍기, 색상변경 / offsetX, offsetY, lineWidth, strokeStyle, stroke()


html과 css는 이전글과 동일.

app.js

const canvas = document.querySelector("canvas"); /** canvas라는 변수는 html의 canvas라는 엘리먼트를 지정한다 */

const ctx = canvas.getContext("2d"); /** 2d로 그릴 것을지정 ctx는 canvas에 그림 그릴 때 쓰는 것  */
canvas.width = 800;
canvas.height = 800;
let isPainting = false; /** isPainting을 true로 변경될 수 있도록 let으로 설정한다. */

function onMove(event){
  if(isPainting){ /** isPainting이 true면 */
    ctx.lineTo(event.offsetX, event.offsetY); /** 마우스의 현재 위치에 선을 그린다. */
    ctx.stroke(); /** 그린 선을 나타낸다. */
    return;
  }
  ctx.moveTo(event.offsetX, event.offsetY); /** isPainting이 false면 마우스 따라 이동만 한다. */
}

function startPainting(){ /** 그림을 그리는 함수. isPainting이 true면 어떤 행동을 할지는 onMove 함수의 if문에 구현. */
  isPainting = true;
}

function canclePainting(){ /** 그림을 그리지 않는 함수. */
  isPainting = false;
}

canvas.addEventListener("mousemove", onMove); 
canvas.addEventListener("mousedown", startPainting); /** 마우스 오른쪽 버튼이 눌리는 이벤트와 실행될 함수명 */
canvas.addEventListener("mouseup", canclePainting); /** 마우스 오른쪽 버튼이 눌리지 않았을 때 이벤트와 실행될 함수명 */
canvas.addEventListener("mouseleave", canclePainting); /** 마우스가 캔버스를 벗어났을 때 이벤트와 실행될 함수명 */

 

코드 주요 포인트

- offsetX, offsetY는 현재 마우스 좌표를 의미한다.
- canvas.addEventListener("mouseleave", canclePainting)은 버그 해결코드. 없어도 동작하지만 이 코드가 없으면 마우스가 캔버스를 벗어났다가 캔버스로 돌아왔을 때 마우스가 클릭되지 않아도 선이 그려지는 버그가 발생한다. 마우스가 캔버스를 벗어났을 때 그림 그리지 않는 함수를 실행한다.