본문 바로가기
프로젝트/그림 앱 클론코딩

[그림 앱 만들기] canvas, 선 그리기, 선 두께 조절하기

by 두 그루 2023. 1. 26.

기능

- canvas에 마우스 드래그를 통해 선을 그릴 수 있다.

- 옆의 range input을 통해 선의 굵기를 조절할 수 있다.

 

기술

- canvas의 eventListener를 통해 마우스의 조작을 파악한다.

- 마우스의 조작에 따라 선을 그린다.

- 만약 마우스가 canvas를 벗어난다면 선 그리기가 중단되도록 한다.

- range input 값을 통해 선의 굵기(lineWidth)를 조절한다.


https://github.com/soaringwave/html-JS-css/commit/89cbb13c96d2517c14b4494c02ffe75c3494a319

댓글