방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Javascript canvas16 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. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 2 : 도형 그리기 가장 기초인 fillStyle과 fillRect에 대해서 살펴보자. 1. fillStyle - 윤곽선과 채움 색의 초기 설정값은 검은색이다. - fillStyle을 사용하면 다양한 색을 채울 수 있다. 2. fillRect - 사각형을 그리는 함수(x좌표, y좌표, 넓이, 높이) - fill()함수와 stroke() 함수에 영향을 받지 않는다. -> 나중에 설명 - 함수의 자체에서 경로의 시작과 종료가 실행이 된다. -> 나중에 설명 음..첫번째는 뭔말인지 알겠는데 2번째와 3번째의 내용이 어렵다. 이를 이해하려면 다른 도형도 그려보면 쉽게 이해가 된다. 잠깐 원을 그려보도록 하자. 위 소스코드를 실행하면 아래 사진과 같은 결과가 나온다. 일단 arc라는 함수는 원을 그리는 함수로만 이해하자. strok.. 2020. 1. 30. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 1 : 소개 HTML이 HTML5가 되면서 생긴 가장 강력한 기능 중 하나가 바로 Canvas 이다. Canvas는 각종 그림, 선, 사진 및 동영상을 자유롭게 표현 할 수 있게 해주는 노드이며 1개의 테그로 다양한 표현을 할 수 있어서 각종 Javascript 차트(chart.js, canvas.js, echart 등등)에서 사용되고 있다. 그렇다면 캔버스로 차트는 어떻게 만드는 것 인가!! 차트만들기를 위해서 일단 기본부터 살펴보아야 할 것 같다. 캔버스 테그는 아주 간단하게 선언 할 수 있다. 캔버스 테그는 반드시 끝을 닫아주어야 하며, 기본적으로 2가지 속성을 제공한다. 1. width : 넓이 (숫자 형식으로 주어야하며 속성값이 없는 경우에 기본값 300픽셀을 지원한다.) 2. height : 높이 (숫자 .. 2020. 1. 30. 이전 1 2 3 다음
