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

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

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


ARC2

Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 11 : 이벤트 관리2 저번시간에는 사각형 물체에 대해서 이벤트를 부여하는 방법에 대해서 살펴 보았다. 그러면 이제 원(구)에 대해서 살펴 볼 차레이다. 원에 대해서 이벤트를 부여하려면 사각형에서 사용하는 방법을 그대로 써도 되는데 그렇게하면 조금 어색한 문제가 발생 한다. 사각형에서 사용한 기법을 쓰게되면 위의 사진과 같은 문제가 발생한다. 원을 클릭하지 않고 주변을 클릭하였을 뿐인데...클릭이 되어버리는 현상이 나타난다. 그래서 원(구)에 대해서 이벤트를 부여 할 때는 반지름(radius)를 활용하여준다. 물론 타원인 경우에는 해당내용이 적용되지 않는다. * 타원은 타원의방정식을 활용하여야한다. 아래내용을 확인 후 나중에 찾아서 적용해보자. 여기서는 타원의 내용은 없다. ^-^; 자, 선행되어야할 조건은 2가지 이다. 1... 2020. 2. 10.
Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 9 : 원 그리기 원 그리기에 대해서 살펴보자. 원은 선 그리기와 비슷한 개념으로 다가가야한다. 캔버스에서 원은 라디안을 활용하기 때문에..라디안이 익숙치 않으므로 도(degree)로 표기해서 사용하면 그리기 쉽다. 음.."도"라는 개념이 왜 나오냐면...원은 총 360도를 가지고 있기 때문이다. 절반이면 180도 이니깐. 아래 소스코드를 실행하여보자. arc는 원(구)을 그리는 기능이다. 바로 그려지는 것은 아니고 stroke 또는 fill 등의 함수를 통해서 그리기를 완성 하여야 한다. 파라미터 순서를 잘 살펴보자. arc(x좌표, y좌표, 반지름, 시작각, 종료각, 반전여부) 위 내용을 실행하면, 다소 생소하다. 시작각과 종료각은 뭐란말인가.. 이를 이해하려면 몇번 소스코드를 수정해서 값이 어떻게 변하는지 보는게 가.. 2020. 2. 7.