방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com html canvas22 Html Canvas 도형 병합(merge figure, 다각형 만들기) * 게시글 하단의 제 깃허브 주소를 통해 실제 구현된 모습을 볼 수 있습니다 엑셀이나 한셀, 워드 및 한글등 이러한 프로그램에서 테이블을 병합하는 기능을 종종 사용하고는 합니다. 각각의 테이블의 셀이 이쁘장하게 병합되는 것을 보고나면 참 멋지지 않은 일이 아닐 수 없습니다. 이러한 프로그램에서 병합 규칙은 무조건 사각형 모양만 된다는 점 입니다. 직사각형, 정사각형..사각형 모양 이외에는 병합 기능이 제공되지가 않습니다. 물론 표(table)라는 것은 데이터를 일정하게 정렬하고 정리하기 위한 기능이기 때문에 사각형 이외의 모양은 제공되지 않는 것이 맞습니다. 그래서 웹에서 표(table) 이상의 병합이 가능한 기능을 한번 구현하여 보았습니다. 사각형을 모아서 다각형을 만들어 주는 기능이라 할 수 있겠네요.. 2021. 8. 12. Html Canvas에 대한민국 지도 쉽계 계산하여 표현 하기 * 게시글 하단의 제 깃허브 주소를 통해 실제 구현된 모습을 볼 수 있습니다 이전 시간에 만들었던 대한민국 차트는 위경도 값을 다소 복잡한 방법을 통해서 그려냈었습니다. lts0606.tistory.com/420 Html Korea map, Html 캔버스 대한민국 지도 제작(이벤트 포함) 우리나라의 위도와 경도값을 토대로 캔버스에 그려준 뒤에 이벤트를 부여하는 기능입니다. 우리나라 지도의 차트기능 만들 때 사용하였습니다. 우리나라의 위도경도 값은 구글링하면 쉽게 받 lts0606.tistory.com 이러한 방법은 틀린 것은 아니나, 나중에 기능 수정 및 버그발생시에 해당 코드를 매번 보지 않는 경우라면 어렵고 이해하기 힘들 것 입니다. 사실...지금 살펴봐도 이해가 잘 안되어 힘들었습니다.. 조금 더.. 2021. 4. 8. Html Canvas circle agenda, Html 캔버스 원형 시간표(circle schedule, 방학 시간표) 제작기 HTML5가 등장하면서 웹에서 별의별것(?)을 다 하니 클라이언트의 요구사항 수준이 점점 높아지고 있는 시대입니다. 특별한 기능을 제작하고 만드는 경우에는 수학적 사고가 많이 필요로 하는데.. 학창시절에 배웠던 수학을 떠올리기에는 머리가 이미 너무 굳어버린건 아닌지 모르겠습니다...;ㅁ; 이번에 제작한 기능은 원형 시간표 입니다. 원형 시간표는 초등학생(요즘은 배우나 모르겠습니다..) 때 방학숙제에서 자주 하던 원형 표 입니다. 동그라미 원 안에 자기가 해야될 일을 채우고 원 주변은 시간이 쓰여있는 모양 입니다. 해당 기능을 Html 에서 제작하려면 부채꼴 모양이 그려져야 하므로 캔버스(canvas)이외의 방법으로는 구현하기가 어렵습니다. 먼저 기능 구현을 위해서 어떠한 기능이 필요한지 기초 기능을 정리.. 2021. 2. 15. Html Korea map, Html 캔버스 대한민국 지도 제작(이벤트 포함) 우리나라의 위도와 경도값을 토대로 캔버스에 그려준 뒤에 이벤트를 부여하는 기능입니다. 우리나라 지도의 차트기능 만들 때 사용하였습니다. 우리나라의 위도경도 값은 구글링하면 쉽게 받을 수 있습니다. "대한민국 최신 행정구역(shp)" 이라는 주제로 검색하면 다양한 정보를 받을 수 있습니다. 해당 shp파일은 웹에서 표현하기 어려운 값으로 되어 있습니다. shp to geojson이라는 내용으로 검색하여 json형식의 위도, 경도값으로 나오도록 파싱하여 줍니다. * 예 : mygeodata.cloud/converter/shp-to-geojson 파싱을 하고난 뒤에 json 내용을 열어보았습니다. 이제 위도 경도 값을 가져왔으니 캔버스에 그려주어야 합니다. 위도와 경도값을 평면에 나타 내려면 각 값에서 일정한.. 2020. 10. 21. Html Canvas mosaic, Html 캔버스 모자이크 기능 제작 * 게시글 하단의 제 깃허브 주소를 통해 실제 구현된 모습을 볼 수 있습니다 웹에서 이미지를 가져와서 다양하게 꾸미는 기능은 여러 라이브러리가 이미 존재합니다. 선 긋기, 명도, 채도 변경 및 이미지 추가 등 아주 다양한 기능을 제공 합니다. 그런데 이번에 작업 도중 사용자의 요구사항이 모자이크가 원하는 크기와 간격에 맞추어서 동작했으면 좋겠다고 하여\기존의 좋은 라이브러리를 사용 할 수가 없었습니다. 그리하여 제작해본 기능은 특정 영역안의 이미지를 크기와 간격을 조절하여 모자이크 처리하는 기능이였습니다. 이미지를 변경하고 적용하려면 div태그나 image테그를 활용하여 구현하는 것은 어렵습니다. 간단한 예로 선긋기 기능을 만든다고 한다면 사실 무엇을 어떻게 해야될 지 모르기 때문 입니다. 하지만 Htm.. 2020. 8. 27. 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. 이전 1 2 3 4 다음
