방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com beginPath3 Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 9 : 원 그리기 원 그리기에 대해서 살펴보자. 원은 선 그리기와 비슷한 개념으로 다가가야한다. 캔버스에서 원은 라디안을 활용하기 때문에..라디안이 익숙치 않으므로 도(degree)로 표기해서 사용하면 그리기 쉽다. 음.."도"라는 개념이 왜 나오냐면...원은 총 360도를 가지고 있기 때문이다. 절반이면 180도 이니깐. 아래 소스코드를 실행하여보자. arc는 원(구)을 그리는 기능이다. 바로 그려지는 것은 아니고 stroke 또는 fill 등의 함수를 통해서 그리기를 완성 하여야 한다. 파라미터 순서를 잘 살펴보자. arc(x좌표, y좌표, 반지름, 시작각, 종료각, 반전여부) 위 내용을 실행하면, 다소 생소하다. 시작각과 종료각은 뭐란말인가.. 이를 이해하려면 몇번 소스코드를 수정해서 값이 어떻게 변하는지 보는게 가.. 2020. 2. 7. 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. 이전 1 다음
