처음 캔버스에 마우스로 그림을 그릴 땐 괜찮아보였다. 그런데 선의 굵기를 굵게해서 그리니까 선이 갈라져 있는 것 처럼 보였다.
곡선일 때 더심해보였는데, 이유를 몰라서 여러가지 캔버스 line의 설정에 대해 알아보았다.
그러다가 선 모양 (line style) 설정에 대해 알게됐다
| lineWidth | 선 두께 |
| lineCap | 선 끝 부분의 스타일 |
| lineJoin | 선이 만나는 모서리 스타일 |
lineCap의 기본값은 "butt"이고, lineJoin의 기본값은 "miter"이다
lineCap 설정값
lineJoin 설정값
그래서 이 두 가지 설정값을 변경시켜보았다.
ctx.lineJoin = "round"만 설정해줘도 훨씬 선이 부드러워진다.
내가 만든 캔버스에는 혹시 몰라서 둘 다 "round"로 설정해줬다.
참고한 페이지
스타일과 색 적용하기 - Web API | MDN
도형 그리기 장에서는 기본 선과 채우기 스타일만 사용했습니다. 여기서 우리는 그리기를 조금 더 매력적으로 만들 수있는 캔버스 옵션을 살펴볼 것입니다. 그리기에 다른 색상, 선 스타일, 그
developer.mozilla.org
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=javaking75&logNo=140170244058
HTML5 canvas - 선스타일 지정하기 ( lineWidth, lineCap, lineJoin, strokeStyle)
HTML5 canvas - 선스타일 지정하기 선 스타일 속성 lineWidth => 선 두께 지정 ( 기본 1.0 ) line...
blog.naver.com
'Javascript' 카테고리의 다른 글
| [Javascript] 목록의 자료를 삭제하는 방법(Array, Object) (0) | 2021.12.16 |
|---|---|
| React Native - Dimensions / 화면크기대응 (0) | 2021.12.15 |
| Canvas 모바일에서 사용하기(touchevent) (0) | 2021.11.12 |
| Canvas 지우기, 초기화하기, 그림으로 저장 (0) | 2021.11.10 |
| Canvas 펜 굵기 조절하기 (input range 슬라이더 사용) (0) | 2021.11.10 |