캔버스에 랜덤 좌표 찍고 모양 만들기 (feat.극좌표계) / 23.04.25 내용 추가 수정
캔버스에 영역을 선택해야 한다. 문제는 좌표값을 받아서 테두리 따라 모양을 만들어야 하는데 위치 및 개수가 랜덤이다. 좌표 개수는 최소 4, 최대 6이라는 제한을 두게 된다. 이것 때문에 약 3일을 고민했다. 처음에는 선분끼리 겹치면 지우는 방법(ccw)을 택했는데 4각형은 괜찮았으나 5각형부터 문제였다. 그래서 다음에 선택한 것이 좌표간의 거리를 계산해 짧은 것만 남기는 방법을 택했는데 이것도 실패였다. 한참 고민하다 집단 지성의 힘을 빌리고자 카톡방에서 좌표 관련해서 잘 아는 사람을 찾았다. 중앙위치를 잡고 삼각형을 그려서 .... 어쩌구저쩌구 ... 생각해보니 메모리가 터질 것 같단 생각이 들었다. 대략 1시간 정도 졸다가 다시 생각해보니 '중앙 위치를 중심으로 시계방향으로 좌표를 정렬하면 되지 않..
어쩌다 보니 canvas에서 fillRect를 사용해 text의 배경으로 들어갈 사각형의 사이즈를 text 가로 사이즈에 맞게 그려야 할 일이 생김. css로 하는 거면 그냥 대충 width: fit-content 썼을거임. 귀찮아서 구글에 적당히 검색해봄. 이런거 할 사람이 있을지 의문이 들었는데 진짜 없었나봄. 오픈톡방에도 물어봤더니 아무도 모름. 이게 맞나 싶었지만 mdn 뒤져봄 mdn 선생님이 알려주신 메소드! measureText() 사용 방법은 간단함. ... 생략 ... const text = "Hello World!" // 문자열 const getWidth = canvas.measureText(text) canvas.fillStyle = "yellow" // 사각형 채울 색상 //fillR..