방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Html 캔버스/Html 캔버스 에니메이션19 Html Canvas 이미지 글씨 입력 후 사진으로 출력 * 게시글 하단의 제 깃허브 주소를 통해 실제 구현된 모습을 볼 수 있습니다 이번 기능은 이미지를 가져온 뒤에 해당 이미지에 글씨를 입력해서 사진으로 출력하는 기능입니다. "이미지에 텍스트를 더하여 이미지로 출력하기" 기능이라고 할 수 있겠습니다. 이미지를 가져와 캔버스에 그리는 것은 어렵지가 않습니다. input type file 기능을 통하여 만들어 준 다음 해당 파일을 FileReader로 읽어서 Image 클래스에서 생성한 뒤에 생성된 데이터를 캔버스에서 그려주면 됩니다. const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); let WIDTH = canvas.width let HEIGHT = .. 2021. 4. 19. Html Canvas에 대한민국 지도 쉽계 계산하여 표현 하기 * 게시글 하단의 제 깃허브 주소를 통해 실제 구현된 모습을 볼 수 있습니다 이전 시간에 만들었던 대한민국 차트는 위경도 값을 다소 복잡한 방법을 통해서 그려냈었습니다. lts0606.tistory.com/420 Html Korea map, Html 캔버스 대한민국 지도 제작(이벤트 포함) 우리나라의 위도와 경도값을 토대로 캔버스에 그려준 뒤에 이벤트를 부여하는 기능입니다. 우리나라 지도의 차트기능 만들 때 사용하였습니다. 우리나라의 위도경도 값은 구글링하면 쉽게 받 lts0606.tistory.com 이러한 방법은 틀린 것은 아니나, 나중에 기능 수정 및 버그발생시에 해당 코드를 매번 보지 않는 경우라면 어렵고 이해하기 힘들 것 입니다. 사실...지금 살펴봐도 이해가 잘 안되어 힘들었습니다.. 조금 더.. 2021. 4. 8. Html Korea map, Html 캔버스 대한민국 지도(차트 스타일) 이전에 대한민국 지도 스타일을 geoJson 파일을 활용하여 제작하였습니다. 지도 자체를 실제로 비율에 맞추어 그리는 방식이다보니 리얼한 모습의 기능이였습니다. lts0606.tistory.com/420 Html Korea map, Html 캔버스 대한민국 지도 제작(이벤트 포함) 우리나라의 위도와 경도값을 토대로 캔버스에 그려준 뒤에 이벤트를 부여하는 기능입니다. 우리나라 지도의 차트기능 만들 때 사용하였습니다. 우리나라의 위도경도 값은 구글링하면 쉽게 받 lts0606.tistory.com 좀 더 심플하고 간단한 형태의 대한민국 지도를 제작하기 위해서 고민을 하던 때 아래와 같은 사진을 보게 되었습니다. 위 사진의 우측 모양처럼 무언가 도형으로 그림을 그리는건 어떤가 하여.. 실제로 그림을 그려서 저.. 2021. 3. 19. Html canvas 그리는 좌표 저장 기능(x, y position) Html 캔버스에서 내가 원하는 그림을 그린 뒤 좌표로 나타내기 위해 제작하여 보았습니다. 좌표값은 4가지 형태로 저장하였습니다. 데이터를 단순하게 그릴 x좌표값, y좌표값 그리고 다른 캔버스에서 사용하기 위해 준비한 비율값인 rateX, rateY값 입니다. 원하는 그림을 그린뒤 연결하게 하려면 2가지 이벤트가 선행 되어야 합니다. 1. 마우스가 Down 상태 입니다. 2. 1번 조건이 만족한 상태로 마우스가 move 합니다. 이때가 그리기 시작을 의미 합니다. 3. 2번 상태에서 마우스가 up 인 경우에는 그리기가 종료되었음을 의미 합니다. 이러한 이벤트에 기능 붙이는것은 이제 어렵지 않습니다. 아래 코드처럼 기본 틀을 만들어 줍니다. const canvas = document.getElementBy.. 2021. 3. 4. 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. 이전 1 2 3 4 다음
