그림판 만들기
- 만들고 싶은 기능
- 먼저 마우스를 움직일 때마다, 캔버스 좌표가 계속 움직여야 한다. 따라서 움직일 때마다 시작점이 바뀌는 함수를 만들어준다.
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;
}