본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


Html 캔버스7

Html Canvas에 대한민국 지도 쉽계 계산하여 표현 하기 * 게시글 하단의 제 깃허브 주소를 통해 실제 구현된 모습을 볼 수 있습니다 이전 시간에 만들었던 대한민국 차트는 위경도 값을 다소 복잡한 방법을 통해서 그려냈었습니다. lts0606.tistory.com/420 Html Korea map, Html 캔버스 대한민국 지도 제작(이벤트 포함) 우리나라의 위도와 경도값을 토대로 캔버스에 그려준 뒤에 이벤트를 부여하는 기능입니다. 우리나라 지도의 차트기능 만들 때 사용하였습니다. 우리나라의 위도경도 값은 구글링하면 쉽게 받 lts0606.tistory.com 이러한 방법은 틀린 것은 아니나, 나중에 기능 수정 및 버그발생시에 해당 코드를 매번 보지 않는 경우라면 어렵고 이해하기 힘들 것 입니다. 사실...지금 살펴봐도 이해가 잘 안되어 힘들었습니다.. 조금 더.. 2021. 4. 8.
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 Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 6 : 이미지 그리기 캔버스에서 이미지를 그리는 것은 이미지 데이터를 읽어서 캔버스에 일일이 그리는 것 처럼 텍스트, 선 또는 원을 그리는 방식과 비슷하다. 그러니까..선을 그리는 것이나 이미지를 그리는 것이나 같다라는 점 이다. 일단 이미지를 그려보기 위해서 이미지를 제작하였다.(파워포인트로..) 요 이미지를 가져와서 캔버스에 적용하는 것은 Image라는 객체를 사용하여 실시 하였다. 이미지내용이 불러와지면 캔버스에 그리기 행위를 실시 하였다. drawImage라는 함수의 첫번째 값은 이미지 객체, 두번째는 x좌표, 세번째는 y좌표이다. 위 이미지를 불러와서 그림을 그리면 아래모양처럼 나온다. 뭔가 이미지를 그렸는데..사이즈가 안맞으니 속상하다. 이럴때는 drawImage에서 네번째와 다섯번째에 이미지가 그려질 사이즈를 지.. 2020. 2. 3.
Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 3 : 선 그리기1 캔버스 사각형 그리기와 사각형 채우기를 통해서 기본 사용법을 익혔다. 이번에는 선 그리는 방법이다. 사용법은 매우 간단하다. 앞서 살펴본 beginPath가 나왔다. beginPath는 캔버스에서 시작을 의미한다. 즉, 내가 이제 그릴거다~ 라는 의미이다. moveTo 함수를 통해서 선을 그리는 시작점을 주고 lineTo를 통해서 그리는 마지막 지점을 알려준다. stroke 함수는 moveTo와 lineTo로 경로가 정해진 지점에 선을 그리는 역할을 수행한다. 위 내용을 실행하여보면 아래사진처럼 그림이 그려 진다. 캔버스에서 선의 굵기를 따로 주지 않으면 기본값으로 1을 사용한다. 위 내용을 토대로 보면, x좌표 30 y좌표 10만큼 출발지점에서 x좌표 30 y좌표 60까지 기본 선 굵기인 1을 가지고 .. 2020. 1. 30.
Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 2 : 도형 그리기 가장 기초인 fillStyle과 fillRect에 대해서 살펴보자. 1. fillStyle - 윤곽선과 채움 색의 초기 설정값은 검은색이다. - fillStyle을 사용하면 다양한 색을 채울 수 있다. 2. fillRect - 사각형을 그리는 함수(x좌표, y좌표, 넓이, 높이) - fill()함수와 stroke() 함수에 영향을 받지 않는다. -> 나중에 설명 - 함수의 자체에서 경로의 시작과 종료가 실행이 된다. -> 나중에 설명 음..첫번째는 뭔말인지 알겠는데 2번째와 3번째의 내용이 어렵다. 이를 이해하려면 다른 도형도 그려보면 쉽게 이해가 된다. 잠깐 원을 그려보도록 하자. 위 소스코드를 실행하면 아래 사진과 같은 결과가 나온다. 일단 arc라는 함수는 원을 그리는 함수로만 이해하자. strok.. 2020. 1. 30.