본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


FillRect2

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.