yeon
yeon I am a Korean web programmer with bboy dancing as a hobby. :)

The canvas put point part2

The canvas put point part2

canvas put point part2

canvas에 이벤트를 활용하여 간단한 그리기 도구 만들기


canvas addEventListener

mousedown move up을 활용하여 put point


mousedown

1
2
3
4
5
6
7
var isDraw = false;
var fnMouseDown = (e) => {
    isDraw = true;
    putPoint(e);
};

canvas.addEventListener('mousedown', fnMouseDown);

mousedown 이벤트에서 isDraw 그리기 시작 변수 true
putPoint 호출하여 그리기


mousemove

1
2
3
4
5
6
7
8
9
10
11
12
var putPoint = (e) => {
    if (isDraw) {
        ctx.lineTo(e.clientX, e.clientY);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(e.clientX, e.clientY, radius, 0, Math.PI * 2);
        ctx.fill();
        ctx.beginPath();
        ctx.moveTo(e.clientX, e.clientY);
    }
};
canvas.addEventListener('mousemove', putPoint);

lineTo, arc, moveTo 활용하여 그리기 putPoint mousemove 이벤트 등록


mouseup

1
2
3
4
var fnMouseUp = (e) => {
    isDraw = false;
    ctx.beginPath();
};

isDraw 그리기 시작 변수 false
canvas path 초기화

  • ctx.beginPath(): 경로 목록을 비워 새 경로를 시작




comments powered by Disqus