(Meme Maker) #그림판만들기

그림판 만들기

---

 

- 만들고 싶은 기능

 

• 먼저 마우스를 움직일 때마다, 캔버스 좌표가 계속 움직여야 한다. 따라서 움직일 때마다 시작점이 바뀌는 함수를 만들어준다.

canvas.addEventListner("mousemove", onMove);

function onMove(event) {
  ctx.moveTo(event.offsetX, event.offsetY);
}

 

• 마우스를 클릭하면서, 마우스를 움직이면 그림이 그려지는 것이므로, 클릭이 됐다는 신호가 주어지면 mousemove 콜백함수에서 그림이 그려져야한다. 먼저, 클릭이 되면 신호가 주어지고 클릭이 떨어지면 신호가 없어지는 함수를 만들어준다.

canvas.addEventListener("mousedown", onMouseDown);
canvas.addEventListener("mouseup", onMouseUp);

// 전역변수로 isPainting 값을 false로 준다.
let isPainting =  false;


function onMouseDown(){
	//클릭이 됐다는 신호
	isPainting = true;
}

function onMouseUp(){
	//클릭이 떨어졌다는 신호
    isPainting = false;
}

 

• 다음으로 눌렀을 때, 그림이 그려지는 기능을 만든다.

canvas.addEventListener("mousemove", onMove);
canvas.addEventListener("mousedown", onMouseDown);
canvas.addEventListener("mouseup", onMouseUp);


function onMove(event) {
	// 만약에 눌렸다면 그려주세요.
    if(isPainting){
    	ctx.lineTo(event.offsetX, event.offsetY);
        ctx.stroke();
    }
    ctx.moveTo(event.offsetX, event.offsetY);
}


// 전역변수로 isPainting 값을 false로 준다.
let isPainting =  false;

function onMouseDown(){
	//클릭이 됐다는 신호
	isPainting = true;
}

function onMouseUp(){
	//클릭이 떨어졌다는 신호
    isPainting = false;
}

 

 

이제 잘 그려지긴 하지만, 캔버스 밖 나갔다오면 클릭하지 않았음에도 계속 그림이 그려지는 오류가 있다.

이를 수정해보자.

canvas.addEventListener("mouseleave", onMouseUp);

 

마우스가 떨어지면,  onMouseUp 함수가 실행되게끔하면 끝!

 

---

 

-전체 JavaScript

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

canvas.width = 700;
canvas.height = 700;

ctx.lineWidth = 2;

// isPainting 변수 지정
let isPainting = false;

canvas.addEventListener("mousemove", onMove);
canvas.addEventListener("mousedown", onMouseDown);
canvas.addEventListener("mouseup", onMouseUp);
canvas.addEventListener("mouseleave", onMouseUp);

function onMove(event) {
  // 만약에 눌렸다면 그려주세요.
  if (isPainting) {
    ctx.lineTo(event.offsetX, event.offsetY);
    ctx.stroke();
  }
  ctx.moveTo(event.offsetX, event.offsetY);
}

function onMouseDown() {
  //클릭이 됐다는 신호
  isPainting = true;
}

function onMouseUp() {
  //클릭이 떨어졌다는 신호
  isPainting = false;
}