방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Save2 Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 8 : 확대와 영역 scale에 대해서 먼저 살펴보자. 캔버스에서의 scale 기능은 줌인, 줌아웃 효과를 위해서 사용된다. 아래 코드를 실행하여보자. 분명 같은 x좌표, y좌표와 같은 넓이와 높이였음에도 불구하고 사각형의 크기와 위치가 전혀 다르게 나타난 것을 볼 수 있다. 특정 줌 인, 줌 아웃 이벤트시에 해당 기능이 왠지 요긴하게 쓰일 것 같다. 여기서도 마찬가지로 save와 restore를 적절하게 사용해서 초기값으로 돌아가기 편리하게 한 점을 다시한번 살펴보아야 한다. 다음으로 살펴볼 기능은 clip 이라는 기능이다. clicp은 구멍뚫기(?) 효과를 나타내는데.. 특정 영역에 효과를 선언하면 해당 효과를 제외한 나머지는 안보인다. (뭔소리??) 아래 사진을 보자. 위 사진과 같이 구멍(hole)영역을 지정한뒤에,.. 2020. 2. 7. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 7 : 좌표 심화 translate 사전적 의미로는 번역을 뜻하며, 캔버스에서는 중앙점을 옮기는데 사용된다. 만약 x좌표가 0, y좌표가 0 인데 위 translate를 활용해서 x좌표를 50, y좌표를 50만큼 이동하면 0, 0의 실제 좌표값은 50,50이 되어버린다. 아래 코드를 실행하여보자. 분명 같은 x좌표, y좌표를 가지고 있음에도 불구하고 서로위치가 다르게 나타났다. 그렇다면 해당 중앙점을 다시 원래대로 되돌리려면 어떻게 해야할까? 이론적으로는 내가 x좌표를 100만큼 y좌표를 100만큼 움직였으므로 다시 원래의 중심점으로 옮기려면 100만큼씩 빼 주면 가능하다. 실제로도 그렇게 적용하면 원하는 방향으로 잘 그려진다. 스크립트 코드를 변경하여보자. const canvas = document.getElementB.. 2020. 2. 6. 이전 1 다음
