방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Javascript canvas16 Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 13 : 바 차트 1 드디어 대망의 캔버스를 통한 차트만들기시간 첫번째이다. 차트는 기본적인 BAR 형태의 차트를 만들어보도록 하겠다. 앞선 내용들을 어느정도 숙지하고나서 아래 내용을 살펴보도록 하자. 사용자가 차트를 그리고싶어하는 데이터는 x좌표, y좌표와 높이 넓이 등이 포함되어있는 데이터가 아니다. 오직 순수하게 값(value)만 존재하는 데이터를 가지고 차트가 나타나주기를 바란다. 그러면 차트를 구성하려면 무엇부터 하여야 할까? 먼저 좌표의 개념부터 정리하여보자. 사용자가 데이터를 입력하였다고하면 캔버스의 특성상 값이 크면 맨 위의 지점은 조금만 떨어저야하고, 값이 작으면 많이 내려가야한다. 사진을 살펴보자. 캔버스의 y좌표는 아래로 향할수록 값이 커진다. 그래프로 표현해야될 값이 커질수록 내가 그리려는 차트는 맨위 .. 2020. 2. 12. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 12 : 이벤트 관리3 이벤트를 부여하는 방법 세번째 시간이다. 앞선 시간에는 사각형, 원에대해서 알아보았다면 여러 모양을 지닌 다각형에 대해서 이벤트를 주는 방법이다. 다각형은 말 그대로 여러 각을 지닌 도형을 의미한다. 아래 사진을 보자. 위 사진처럼 특정 도형이 존재한다고 보자. 사각형에 이벤트를 부여하는 방법을 쓰기에는 빈 공간이 너무 많다. 마찬가지로 원에서 사용한 방법을 쓰기에도 중간이 아에 비어버렸으며, 마찬가지로 빈 공간이 많다. 즉, 기존에 원과 사각형에서 사용한 알고리즘을 적용시킬 수 없다라는 것 이다. 먼저 영역인 곳과 영역이 아닌곳을 클릭했다고 하여 보자. 빨강색 원은 영역이 아닌곳을 클릭한 경우, 검은색 원은 영역 내부를 클릭한 경우라고 하여보자. 사람은 한눈에 3군데는 아닌곳을 선택했고, 2군데가 도형.. 2020. 2. 11. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 11 : 이벤트 관리2 저번시간에는 사각형 물체에 대해서 이벤트를 부여하는 방법에 대해서 살펴 보았다. 그러면 이제 원(구)에 대해서 살펴 볼 차레이다. 원에 대해서 이벤트를 부여하려면 사각형에서 사용하는 방법을 그대로 써도 되는데 그렇게하면 조금 어색한 문제가 발생 한다. 사각형에서 사용한 기법을 쓰게되면 위의 사진과 같은 문제가 발생한다. 원을 클릭하지 않고 주변을 클릭하였을 뿐인데...클릭이 되어버리는 현상이 나타난다. 그래서 원(구)에 대해서 이벤트를 부여 할 때는 반지름(radius)를 활용하여준다. 물론 타원인 경우에는 해당내용이 적용되지 않는다. * 타원은 타원의방정식을 활용하여야한다. 아래내용을 확인 후 나중에 찾아서 적용해보자. 여기서는 타원의 내용은 없다. ^-^; 자, 선행되어야할 조건은 2가지 이다. 1... 2020. 2. 10. 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. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 6 : 이미지 그리기 캔버스에서 이미지를 그리는 것은 이미지 데이터를 읽어서 캔버스에 일일이 그리는 것 처럼 텍스트, 선 또는 원을 그리는 방식과 비슷하다. 그러니까..선을 그리는 것이나 이미지를 그리는 것이나 같다라는 점 이다. 일단 이미지를 그려보기 위해서 이미지를 제작하였다.(파워포인트로..) 요 이미지를 가져와서 캔버스에 적용하는 것은 Image라는 객체를 사용하여 실시 하였다. 이미지내용이 불러와지면 캔버스에 그리기 행위를 실시 하였다. drawImage라는 함수의 첫번째 값은 이미지 객체, 두번째는 x좌표, 세번째는 y좌표이다. 위 이미지를 불러와서 그림을 그리면 아래모양처럼 나온다. 뭔가 이미지를 그렸는데..사이즈가 안맞으니 속상하다. 이럴때는 drawImage에서 네번째와 다섯번째에 이미지가 그려질 사이즈를 지.. 2020. 2. 3. 이전 1 2 3 다음
