먼저 html 파일에 <canvas>를 만들고 js파일을 연결한다.
<body>
<canvas></canvas>
<script src="meme.js"></script>
</body>
<canvas>의 크기는 css으로 작성해도되지만 퀄리티를 위해 자바스크립트로 정의하는것이 좋다.
마우스가 눌러졌을때 (mousedown) ispainting을 true 하여 작동하게 하고, 마우스를 땟을때(mosueup) ispainting을 false하여 작동을 멈춘다.
마우스가 움직일때 ispainting이 true면 {}안의 내용이 수행되고, false면 움직이기만(moveTo) 한다.
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 800;
//선 굵기
ctx.lineWidth = 2;
let isPainting = false;
function onMouseMove(event) {
// isPainting 이 true 면 아래의 내용 수행
if (isPainting) {
ctx.lineTo(event.offsetX, event.offsetY);
ctx.stroke();
return;
}
// isPainting 이 false 면 움직이기만 : moveTo
ctx.moveTo(event.offsetX, event.offsetY);
}
function onMouseDown() {
isPainting = true;
}
function onMouseUp() {
isPainting = false;
}
canvas.addEventListener("mousemove", onMouseMove);
canvas.addEventListener("mousedown", onMouseDown);
canvas.addEventListener("mouseup", onMouseUp);
**버그
이렇게까지하면 잘 되는듯 보이지만 작은 버그가 한가지 발생한다.
마우스를 누른채로 그림을 그리다가 캔버스 밖으로 마우스가 나갔다가 다시 들어오면 마우스를 누르지 않아도 그림이 그려지는 버그이다.
이유는 canvas밖으로 나갈때까지 마우스를 누르고 있었기 때문이다.
고로 moseup이 실행되지 않은것이고,
그것은 { isPainting = false; } 가 실행되지 않아 계속 { isPainting = true; } 인 상태임을 의미한다.
이를 해결하는 방법은 두가지가 있다.
첫번째 방법은, mouseleave로 마우스가 떠났을때를 감지하고 그때 onMouseUp을 호출하여 마우스가 canvas를 떠나면 더이상 마우스를 누르고 있지 않다는것을 의미하도록 한다.
canvas.addEventListener("mouseleave", onMouseUp);
두번째 방법은, document에 mouseup 이벤트를 주는것이다. 이렇게하면 어디에서는 마우스를 때면 moseup을 감지할것이다.
canvas.addEventListener("mousemove", onMouseMove);
canvas.addEventListener("mousedown", onMouseDown);
document.addEventListener("mouseup", onMouseUp);
최종적으로 정리한 코드는 아래와 같다.
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 800;
ctx.lineWidth = 2;
let isPainting = false;
function onMouseMove(event) {
// isPainting 이 true 면 아래의 내용 수행
if (isPainting) {
ctx.lineTo(event.offsetX, event.offsetY);
ctx.stroke();
return;
}
// isPainting 이 false 면 움직이기만 : moveTo
ctx.moveTo(event.offsetX, event.offsetY);
}
function srartPainting() {
isPainting = true;
}
function canclePainting() {
isPainting = false;
}
canvas.addEventListener("mousemove", onMouseMove);
canvas.addEventListener("mousedown", srartPainting);
document.addEventListener("mouseup", canclePainting);
canvas.addEventListener("mouseleave", canclePainting);
반응형
'JAVASCRIPT' 카테고리의 다른 글
| JAVASCRIPT ) 변수 (0) | 2024.07.01 |
|---|---|
| JAVASCRIPT ) 숫자 & 문자 (0) | 2024.07.01 |
| JAVASCRIPT ) 클릭했을 때 class 추가하고 재클릭하면 다시 없애기 (0) | 2022.05.04 |
| Javascript addEventListener() - 이벤트 리스너 사용법과 종류 (0) | 2022.05.03 |
| Javascript document - HTML 요소 선택 메소드 (0) | 2022.05.02 |
