[HTML로 그림 그리기 시작] 자바스크립트에서 Canvas에 직선을 그립니다.
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 t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 22441446 / 벌써 - 엔테라 c 치 온 - ン - HTML 5 - 칸 ぁ
Reference
이 문제에 관하여([HTML로 그림 그리기 시작] 자바스크립트에서 Canvas에 직선을 그립니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/minowa_keita/items/3df91a8d70d167e91a1a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)