방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Html 캔버스44 Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 14 : 바 차트 2 앞전시간에는 도형을 그리고, 애니메이션을 주는 부분까지하여 단순한 차트의 형태를 구성하여 보았다. 이번에는 차트를 깔끔하게 그리는 방법과, 입력된 데이터가 하단에 표시되는 방법에 대해서 알아보겠다. 캔버스 내부에 차트를 그릴때 strokeRect함수를 사용해서 계속해서 그렸다. 그러다보니 내부에 줄이 그어진 상태로 차트가 완성되어서 되게 보기 불편한 모양이 되었다. 이러한 현상을 좀 해결하려면 가장 간단한 방법인 "지우고, 다시그리고" 방법을 써 주면 된다. 애니메이션을 주는 방법이 "지우고, 다시그리고" 방법이 짧은 시간동안 지속되면 마치 움직이는 효과를 나타내는 것 이라고 했으므로 처음 그리는 방법에서의 코드를 간단하게 수정하면 깔끔한 모양의 차트가 나오게 된다. 앞 시간 코드의 setInterval.. 2020. 2. 13. 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 캔버스) 튜토리얼 (차트만들기!) - 10 : 이벤트 관리1 캔버스에 이벤트를 주는방법 첫번째 시간이다. * 3번째 시간까지 있슴돠~ > { ctx.fillRect(element.x, element.y, element.width, element.height); }); } areaSimple() 맨 첫장에서 설명하였듯 캔버스는 단일 객체이다. 즉, 다른 html 테그처럼 부모노드 > 자식노드 의 관계가 아니다. 1개의 테그로만 되어 있다. 그러므로 이벤트를 부여하려면 직접 캔버스에 해 주어야 하며, 그림을 그리는 데이터를 계산식을 통해서 계산을 해 주어야 한다. 일단..캔버스에 클릭이벤트를 부여하여보자. 스크립트를 수정하자. const canvas = document.getElementById('canvas'); const ctx = canvas.getContext.. 2020. 2. 7. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 9 : 원 그리기 원 그리기에 대해서 살펴보자. 원은 선 그리기와 비슷한 개념으로 다가가야한다. 캔버스에서 원은 라디안을 활용하기 때문에..라디안이 익숙치 않으므로 도(degree)로 표기해서 사용하면 그리기 쉽다. 음.."도"라는 개념이 왜 나오냐면...원은 총 360도를 가지고 있기 때문이다. 절반이면 180도 이니깐. 아래 소스코드를 실행하여보자. arc는 원(구)을 그리는 기능이다. 바로 그려지는 것은 아니고 stroke 또는 fill 등의 함수를 통해서 그리기를 완성 하여야 한다. 파라미터 순서를 잘 살펴보자. arc(x좌표, y좌표, 반지름, 시작각, 종료각, 반전여부) 위 내용을 실행하면, 다소 생소하다. 시작각과 종료각은 뭐란말인가.. 이를 이해하려면 몇번 소스코드를 수정해서 값이 어떻게 변하는지 보는게 가.. 2020. 2. 7. 이전 1 ··· 3 4 5 6 7 8 다음
