창고

  • 홈
  • CSS/JS
  • Design
  • ETC

canvas API 1

[JS][Canvas] 캔버스로 파이그래프 그리기

RIP Tutorial : 파이차트 그리기, 파이조각(Wedge) 그리기 원리, 캔버스 원형 그라디언트 파이 그래프를 그릴 때 보통은 시작 각도가 0도라서 시계 12시 방향이 아닌 3시 방향부터 그리기 시작한다. 이는 상황에 따라 다르겠지만 보통 긍정적(비율이 크기를 기대) /부정적(비율이 작기를 기대) 2개의 항목이 있는 파이 그래프에서는 아무래도 12시 방향부터 부정적 비율이 그려져야 가독성이 좋을것 같다는 생각을 했음. 기본 RIP 튜토리얼 사이트에 나온것에서 시작 각도만 조정해주면 된다. 여기서 필요한 개념이 라디안(radian)과 각도(degree) 사이의 변환인데, 캔버스에서 arc를 이용하기 위해선 각도를 라디안으로 변형해줄 필요가 있다. (각도는 0도부터 360까지, 라디안은 0부터 약 6..

CSS&JS/⚡Thinkers 2023.04.29
1
더보기
프로필사진

  • 분류 전체보기 (198)
    • CSS&JS (182)
      • ✨개인 프로젝트 (15)
      • ⚡Thinkers (71)
      • 👀Study and Copy (84)
      • 🧷Useful Sites and Memo (2)
      • Frontend Mini Challenge (5)
      • 코딩테스트 (5)
    • DESIGN (12)
    • ETC (4)

Tag

js class, Vanilla Javascript, Class, 바닐라 자바스크립트, javascript, Frontend Mini Challenge, 커스텀 셀렉트, JS, Zerocho, Custom Select, canvas API, html, css, reduce, sigmoira challenge, 우쿨렐레, 자바스크립트, marquee, fmc, vanilla js,

Copyright © Kakao Corp. All rights reserved.

티스토리툴바