방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Html 캔버스44 Html Canvas 자세히 보기(확대 보기, 크게 보기, 미리 보기, 돋보기 기능) * 게시글 하단의 제 깃허브 주소를 통해 실제 구현된 모습을 볼 수 있습니다 이번에 소개할 기능은 돋보기 기능(확대, 크게, 미리보기) 입니다. 돋보기 기능은 원본 이미지를 대상으로 마우스를 움직이면 사진이 크게 보이는 기능 입니다. 아래 사진처럼 이미지에 마우스를 움직이면서 해당 영역 사진이 크게보이는 기능 입니다. * 이러한 기능을 뭐라하는지 참 어렵네요.. 해당 기능을 만들기 위해서 먼저 동작과 이벤트를 고려하여 봅니다. 1. 사진이 있는 영역 2. 마우스가 움직이면서 돋보기가 가르키는 영역 3. 돋보기가 가르킨 영역의 내용이 보이는 영역 동작과 이벤트를 고려하면 캔버스가 총 3개가 필요합니다. 캔버스를 이처럼 기능과 역할에 의해 나누는 이유는, 불필요한 렌더링을 막기 위해서 입니다. 만약 1번과 .. 2021. 8. 17. Html Canvas 도형 병합(merge figure, 다각형 만들기) * 게시글 하단의 제 깃허브 주소를 통해 실제 구현된 모습을 볼 수 있습니다 엑셀이나 한셀, 워드 및 한글등 이러한 프로그램에서 테이블을 병합하는 기능을 종종 사용하고는 합니다. 각각의 테이블의 셀이 이쁘장하게 병합되는 것을 보고나면 참 멋지지 않은 일이 아닐 수 없습니다. 이러한 프로그램에서 병합 규칙은 무조건 사각형 모양만 된다는 점 입니다. 직사각형, 정사각형..사각형 모양 이외에는 병합 기능이 제공되지가 않습니다. 물론 표(table)라는 것은 데이터를 일정하게 정렬하고 정리하기 위한 기능이기 때문에 사각형 이외의 모양은 제공되지 않는 것이 맞습니다. 그래서 웹에서 표(table) 이상의 병합이 가능한 기능을 한번 구현하여 보았습니다. 사각형을 모아서 다각형을 만들어 주는 기능이라 할 수 있겠네요.. 2021. 8. 12. 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. 이전 1 2 3 4 5 6 ··· 8 다음
