방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Html 캔버스44 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 캔버스) 튜토리얼 (차트만들기!) - 23 : 최종 정리 캔버스와 관련된 마지막 시간이다. 이번장에서는 내용을 조금 정리해 보려 한다. Html에서 제공하는 캔버스는 내부에 그림을 그리는 효과를 나타내는 엘리먼트이다. 그러한 캔버스는 그리는 것 이외의 다른 이벤트, 영역 등에 대한 효과를 제공하지 않는다. * 그리는 효과는 단순히 그림만 그리는 효과라는 뜻은 아닙니다. ^^; 그렇기 때문에 모든 이벤트 처리 방법에 대해서는 사용자가 직접 구현해야 한다. 물론, Path2D 라는 조금 손쉽게 이벤트를 처리하는 객체가 존재하지만, 구형 브라우저 및 익스플로러에서는 동작하지 않기 때문에 사용하기가 매우 아쉽다. 사용자들이 익스플로러를 안쓰면 되긴하는데..대한민국에서는 아직 그건 무리이기 때문이다. 앞선 시간까지 살펴본 원형 차트에 여러 계산식을 더해주면 아래 코드처.. 2020. 2. 24. 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 캔버스) 튜토리얼 (차트만들기!) - 21 : 원 차트 4 저번시간까지 이벤트를 부여하는 방법에 대해서 살펴 보았다. 이번시간에는 부채꼴 내부에 텍스트를 넣어보도록 하겠다. 앞전 시간에 알게된 사실은 아래 내용이다. 1. 원의 반지름 2. 원의 중심점 3. 점과 점사이의 각(degree) 구하는 방법 4. 이벤트 영역의 시작각(degree) ~ 종료각(degree) 범위 배열 여기에 수학적 방법(?)을 동원하면 텍스트가 들어갈 위치를 만들어낼 수 있다. 아래 고등학교(?) 시절 배웠던 사인과 코사인을 보도록 하자. 위 내용을 토대로 텍스트가 들어갈 영역을 만들어 낼 수 있다. 이벤트가 담긴 event_array 영역에서의 시작각 ~ 종료각 차이를 구한뒤에 절반으로 나누게 되면 텍스트가 해당 영역의 가운데 들어가게 될 것 이다. 말이 어려우므로 아래 코드를 살펴보.. 2020. 2. 24. 이전 1 2 3 4 5 6 7 8 다음
