방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Html 캔버스44 Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 8 : 확대와 영역 scale에 대해서 먼저 살펴보자. 캔버스에서의 scale 기능은 줌인, 줌아웃 효과를 위해서 사용된다. 아래 코드를 실행하여보자. 분명 같은 x좌표, y좌표와 같은 넓이와 높이였음에도 불구하고 사각형의 크기와 위치가 전혀 다르게 나타난 것을 볼 수 있다. 특정 줌 인, 줌 아웃 이벤트시에 해당 기능이 왠지 요긴하게 쓰일 것 같다. 여기서도 마찬가지로 save와 restore를 적절하게 사용해서 초기값으로 돌아가기 편리하게 한 점을 다시한번 살펴보아야 한다. 다음으로 살펴볼 기능은 clip 이라는 기능이다. clicp은 구멍뚫기(?) 효과를 나타내는데.. 특정 영역에 효과를 선언하면 해당 효과를 제외한 나머지는 안보인다. (뭔소리??) 아래 사진을 보자. 위 사진과 같이 구멍(hole)영역을 지정한뒤에,.. 2020. 2. 7. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 7 : 좌표 심화 translate 사전적 의미로는 번역을 뜻하며, 캔버스에서는 중앙점을 옮기는데 사용된다. 만약 x좌표가 0, y좌표가 0 인데 위 translate를 활용해서 x좌표를 50, y좌표를 50만큼 이동하면 0, 0의 실제 좌표값은 50,50이 되어버린다. 아래 코드를 실행하여보자. 분명 같은 x좌표, y좌표를 가지고 있음에도 불구하고 서로위치가 다르게 나타났다. 그렇다면 해당 중앙점을 다시 원래대로 되돌리려면 어떻게 해야할까? 이론적으로는 내가 x좌표를 100만큼 y좌표를 100만큼 움직였으므로 다시 원래의 중심점으로 옮기려면 100만큼씩 빼 주면 가능하다. 실제로도 그렇게 적용하면 원하는 방향으로 잘 그려진다. 스크립트 코드를 변경하여보자. const canvas = document.getElementB.. 2020. 2. 6. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 6 : 이미지 그리기 캔버스에서 이미지를 그리는 것은 이미지 데이터를 읽어서 캔버스에 일일이 그리는 것 처럼 텍스트, 선 또는 원을 그리는 방식과 비슷하다. 그러니까..선을 그리는 것이나 이미지를 그리는 것이나 같다라는 점 이다. 일단 이미지를 그려보기 위해서 이미지를 제작하였다.(파워포인트로..) 요 이미지를 가져와서 캔버스에 적용하는 것은 Image라는 객체를 사용하여 실시 하였다. 이미지내용이 불러와지면 캔버스에 그리기 행위를 실시 하였다. drawImage라는 함수의 첫번째 값은 이미지 객체, 두번째는 x좌표, 세번째는 y좌표이다. 위 이미지를 불러와서 그림을 그리면 아래모양처럼 나온다. 뭔가 이미지를 그렸는데..사이즈가 안맞으니 속상하다. 이럴때는 drawImage에서 네번째와 다섯번째에 이미지가 그려질 사이즈를 지.. 2020. 2. 3. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 5 : 좌표 사각형과 선을 그려보았으니 이제 대충 캔버스를 만질 때 필요한 요소에 대해서 살펴본 것 같다. 기본적으로 캔버스를 그리는 기본 공식은 3가지 요소이다. - x좌표, y좌표 및 크기 너무 당연한 이야기이지만 3가지중 1가지라도 없으면 문제되는 것이 x좌표 및 y좌표이다. 아무튼! 캔버스에서 텍스트를 그리는 방법은 2가지로 나뉘어 진다. 채우기 형태의 텍스트인지 아니면 그리기형태의 텍스트로 나뉘어진다. 예제코드를 살펴보자. 뭐..전혀 어려워 보이지 않는 코드이다. 1번째 값은 글자, 2째는 x좌표, 3째는 y좌표이며 옵션으로 4번째는 텍스트의 최대 길이 이다. 4번째는 옵션 개념이므로 굳이 쓰지 않아도 문제되지는 않는다. 자세히보면 font 라는 값이 존재하는데.. font에는 반드시 "00px 폰트 스타일.. 2020. 1. 31. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 4 : 선 그리기2 선 그리기에 대해서 좀더 알아보자. 앞선 내용처럼 선은 굵기를 줄 수 있고 시작과 종료점을 주어 다양한 모양으로 그릴 수 있다. 선의 굵기가 굵어지면 문제되는 것이 굵은 선의 끝부분이 넘처서 생각하는바와 다른 모양이 나온다는 점 이다. 아래코드를 보자. 자세히보면 y값은 100 ~ 50 사이만 증감하는 것을 볼 수 있다. 그렇다면 선은 예상하건데 높이가 일정한 패턴을 보여야 하는게 맞다. 그러나 실제로 실행하여보면.. 이상하다...y값이 50 또는 100이기 때문에 높이는 같아야 하는데 말이다. 위 현상은 선의 굵기 때문에 선의 끝 부분이 삐져(?)나오는 현상이다. 아래 사진을 보자. 같은 y좌표 값을 가지더라도 선의 굵기가 굵어질수록 무언가 위로 솟구치는 모양이 나와버리게 된다. 요러한 현상이 발생하게.. 2020. 1. 31. 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. 이전 1 ··· 4 5 6 7 8 다음
