[HTML로 그림 그리기 시작] 자바스크립트에서 Canvas에 직선을 그립니다.

canvas,JavaScript의 마우스 이벤트로 직선을 그립니다.
canvas로 선분을 그리는 방법 그대로 마우스 이벤트를 설정하면 문제가 발생하기 때문에,
문제점·해결안을 썼습니다.

목표

아래 이미지를 목표로합니다.

문제점

마우스 이벤트
1.onmousedown->시점 설정
2.onmousemove->시점~커서 위치까지를 선으로 묶는다
3.onmouseup -> 종점을 설정/시점~종점까지를 선으로 연결
을 설정하는 것만으로 마우스가 움직인 궤적 모두에 선이 그려져 버립니다.
이것은 캔버스가 동영상처럼 그리기 때문입니다.

해결책

커서 위치의 좌표 관리 + 묘화 화면을 매번 삭제하는 처리 추가
※자세한 것은 맨 아래 데모 화면을 참조해 주세요. 코드도 기재되어 있습니다.
1. 종점 좌표를 배열 관리하기 위한 []를 준비

let storedLines = [];

2. 그리기를 지우기 + 시작점 ~ 끝점을 선분으로 연결하는 함수를 설정.

function Redraw(){
    ctx.clearRect(0,0,can.width,can.height);
    if(storedLines.length == 0){
        return;
    }
    for(let i = 0; i<storedLines.length; i++){
        ctx.beginPath();
        ctx.moveTo(storedLines[i].x1, storedLines[i].y1);
        ctx.lineTo(storedLines[i].x2, storedLines[i].y2);
        ctx.stroke();
    }
}

3.onmousemove->2에서 설정한 함수를 사용합니다.
4.onmouseup -> 종점 좌표를 storedLines로 push

데모

See the Pen HTML/Canvas Drawing Stroke Line by Keita Minowa ( @ 케타 미노 ) on CodePen .

canvas로 선분을 그릴 수 있었습니다.

참고 URL

h tps : // s c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 22441446 / 벌써 - 엔테라 c 치 온 - ン - HTML 5 - 칸 ぁ