[HTML5] Canvas API 기초 2 - 마우스로 선 제어하기
지난 포스팅에서는 캔버스 기초로 선을 캔버스에서 원하는 위치에 그리고, 선의 스타일을 조절했다.
이번에는 마우스를 통해 캔버스에 그림을 그리고 다양한 옵션을 적용해보자!
(0, 0)에서 시작해 마우스 움직임에 따라 직선그리기
마우스가 움직일 때 mousemove 이벤트 리스너만 추가해서 만들 수 있다.
beginPath()를 해주는 이유는 매번 마우스가 움직일 때마다 path에 다른 색상을 적용하기 위해서다.
See the Pen Untitled by 이지혜Leejihye (@Leejihye-the-reactor) on CodePen.
마우스 눌렀을 때 움직임에 따라 선 그리기
일반적으로 그림판에 그림을 그릴 때처럼 마우스를 누르고 움직였을 때 선이 그려지도록 했고,
마우스에서 손을 떼고 마우스가 캔버스 영역을 벗어났을 때 선을 그리는 것을 취소하도록 했다.
See the Pen Untitled by 이지혜Leejihye (@Leejihye-the-reactor) on CodePen.
선 굵기, 색상 조절하기
html 파일에 input으로 선 굵기 조절 바를 추가하고, 색상 옵션을 추가하고
굵기, 색상 옵션 change 이벤트 리스너 걸어주면 된다.
See the Pen Untitled by 이지혜Leejihye (@Leejihye-the-reactor) on CodePen.
바탕색 채우기 모드
html 파일에 Fill 버튼을 추가한다.
바탕색은 캔버스를 눌렀을 때 선택한 색을 캔버스 크기만큼 fillRect()으로 덮어쓰기 해주면 된다.
See the Pen Untitled by 이지혜Leejihye (@Leejihye-the-reactor) on CodePen.
전체, 부분 지우기
전부, 부분 지우기는 바탕색 채우기 개념과 동일한데 캔버스의 배경 색상을 따른다.
하얀 캔버스에서 부분 지우기는 하얀색으로 덧칠하는 것으로 적용하면 되고,
하얀 캔버스에서 전체 지우기는 하얀색으로 캔버스 크기만큼 덮어쓰기 해주면 된다.
See the Pen Untitled by 이지혜Leejihye (@Leejihye-the-reactor) on CodePen.
이미지 추가하기
html 파일에 이미지를 받을 File Input을 추가한다.
이미지 파일을 createObjectURL를 통해 DOMString으로 반환해 이미지 태그에 넣어 원하는 곳에 이미지를 삽입할 수 있다.
⭐️ 주어진 객체를 가리키는 URL을 DOMString으로 반환한다
const objectURL = URL.createObjectURL(object)
See the Pen Untitled by 이지혜Leejihye (@Leejihye-the-reactor) on CodePen.
텍스트 추가하기
html 파일에 텍스트를 받을 Text Input을 추가한다.
캔버스에 더블 클릭 이벤트를 통해 Text Input 값을 삽입한다.
⭐️ 이 때 더블 클릭 이벤트와 기존 클릭 이벤트가 겹쳐서 발생하는 경우가 있다. setTimeout을 통해 이벤트를 구분하기로 한다!
See the Pen Untitled by 이지혜Leejihye (@Leejihye-the-reactor) on CodePen.
캔버스 다운로드하기
<a> 태그의 download 속성을 통해 다운로드 받도록 한다.
⭐️ 이미지를 포함한 형식을 데이터 url로 변환해주는 메소드
toDataUrl()
See the Pen Untitled by 이지혜Leejihye (@Leejihye-the-reactor) on CodePen.