기능
- canvas에 마우스 드래그를 통해 선을 그릴 수 있다.
- 옆의 range input을 통해 선의 굵기를 조절할 수 있다.
기술
- canvas의 eventListener를 통해 마우스의 조작을 파악한다.
- 마우스의 조작에 따라 선을 그린다.
- 만약 마우스가 canvas를 벗어난다면 선 그리기가 중단되도록 한다.
- range input 값을 통해 선의 굵기(lineWidth)를 조절한다.
https://github.com/soaringwave/html-JS-css/commit/89cbb13c96d2517c14b4494c02ffe75c3494a319
'프로젝트 > 그림 앱 클론코딩' 카테고리의 다른 글
그림판 style 설정 (0) | 2023.02.05 |
---|---|
[그림 앱 만들기] 이미지, 텍스트 첨부, 저장하기 (0) | 2023.02.01 |
[그림 앱 만들기] 툴(색상 선택, 채우기, 버리기, 지우기) 만들기 (0) | 2023.02.01 |
[노마드스터디] 주간회고록 4주차 (0) | 2023.01.26 |
댓글