방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com canvas chart2 Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 22 : 원 차트 5 이번시간에는 텍스트를 실제로 넣어보도록 소스코드를 변경해보겠다. 기존에 만들었던 반복문을 함수로 바꾼뒤에 계산식을 조근 변경하고 strokeRect 함수 부분을 텍스트로 바꾸어주자. 텍스트 그리는 방법은 예전 방법과 동일하다. 길이를 계산해서 빼 주는 방법이 추가가 되어야 중앙정렬된 모습이 나타나게 된다. function makeText(index){ event_array.forEach((itm, idx) => { var half = (itm[1] - itm[0]) / 2; var degg = itm[0] + half; var xx = Math.cos(degreesToRadians(degg)) * radius * 0.7 + width / 2; var yy = Math.sin(degreesToRadians.. 2020. 2. 24. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 14 : 바 차트 2 앞전시간에는 도형을 그리고, 애니메이션을 주는 부분까지하여 단순한 차트의 형태를 구성하여 보았다. 이번에는 차트를 깔끔하게 그리는 방법과, 입력된 데이터가 하단에 표시되는 방법에 대해서 알아보겠다. 캔버스 내부에 차트를 그릴때 strokeRect함수를 사용해서 계속해서 그렸다. 그러다보니 내부에 줄이 그어진 상태로 차트가 완성되어서 되게 보기 불편한 모양이 되었다. 이러한 현상을 좀 해결하려면 가장 간단한 방법인 "지우고, 다시그리고" 방법을 써 주면 된다. 애니메이션을 주는 방법이 "지우고, 다시그리고" 방법이 짧은 시간동안 지속되면 마치 움직이는 효과를 나타내는 것 이라고 했으므로 처음 그리는 방법에서의 코드를 간단하게 수정하면 깔끔한 모양의 차트가 나오게 된다. 앞 시간 코드의 setInterval.. 2020. 2. 13. 이전 1 다음
