방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com lineTo2 Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 4 : 선 그리기2 선 그리기에 대해서 좀더 알아보자. 앞선 내용처럼 선은 굵기를 줄 수 있고 시작과 종료점을 주어 다양한 모양으로 그릴 수 있다. 선의 굵기가 굵어지면 문제되는 것이 굵은 선의 끝부분이 넘처서 생각하는바와 다른 모양이 나온다는 점 이다. 아래코드를 보자. 자세히보면 y값은 100 ~ 50 사이만 증감하는 것을 볼 수 있다. 그렇다면 선은 예상하건데 높이가 일정한 패턴을 보여야 하는게 맞다. 그러나 실제로 실행하여보면.. 이상하다...y값이 50 또는 100이기 때문에 높이는 같아야 하는데 말이다. 위 현상은 선의 굵기 때문에 선의 끝 부분이 삐져(?)나오는 현상이다. 아래 사진을 보자. 같은 y좌표 값을 가지더라도 선의 굵기가 굵어질수록 무언가 위로 솟구치는 모양이 나와버리게 된다. 요러한 현상이 발생하게.. 2020. 1. 31. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 3 : 선 그리기1 캔버스 사각형 그리기와 사각형 채우기를 통해서 기본 사용법을 익혔다. 이번에는 선 그리는 방법이다. 사용법은 매우 간단하다. 앞서 살펴본 beginPath가 나왔다. beginPath는 캔버스에서 시작을 의미한다. 즉, 내가 이제 그릴거다~ 라는 의미이다. moveTo 함수를 통해서 선을 그리는 시작점을 주고 lineTo를 통해서 그리는 마지막 지점을 알려준다. stroke 함수는 moveTo와 lineTo로 경로가 정해진 지점에 선을 그리는 역할을 수행한다. 위 내용을 실행하여보면 아래사진처럼 그림이 그려 진다. 캔버스에서 선의 굵기를 따로 주지 않으면 기본값으로 1을 사용한다. 위 내용을 토대로 보면, x좌표 30 y좌표 10만큼 출발지점에서 x좌표 30 y좌표 60까지 기본 선 굵기인 1을 가지고 .. 2020. 1. 30. 이전 1 다음
