방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Html 캔버스/Html 캔버스 튜토리얼 (내가만든 차트!)23 Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 11 : 이벤트 관리2 저번시간에는 사각형 물체에 대해서 이벤트를 부여하는 방법에 대해서 살펴 보았다. 그러면 이제 원(구)에 대해서 살펴 볼 차레이다. 원에 대해서 이벤트를 부여하려면 사각형에서 사용하는 방법을 그대로 써도 되는데 그렇게하면 조금 어색한 문제가 발생 한다. 사각형에서 사용한 기법을 쓰게되면 위의 사진과 같은 문제가 발생한다. 원을 클릭하지 않고 주변을 클릭하였을 뿐인데...클릭이 되어버리는 현상이 나타난다. 그래서 원(구)에 대해서 이벤트를 부여 할 때는 반지름(radius)를 활용하여준다. 물론 타원인 경우에는 해당내용이 적용되지 않는다. * 타원은 타원의방정식을 활용하여야한다. 아래내용을 확인 후 나중에 찾아서 적용해보자. 여기서는 타원의 내용은 없다. ^-^; 자, 선행되어야할 조건은 2가지 이다. 1... 2020. 2. 10. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 10 : 이벤트 관리1 캔버스에 이벤트를 주는방법 첫번째 시간이다. * 3번째 시간까지 있슴돠~ > { ctx.fillRect(element.x, element.y, element.width, element.height); }); } areaSimple() 맨 첫장에서 설명하였듯 캔버스는 단일 객체이다. 즉, 다른 html 테그처럼 부모노드 > 자식노드 의 관계가 아니다. 1개의 테그로만 되어 있다. 그러므로 이벤트를 부여하려면 직접 캔버스에 해 주어야 하며, 그림을 그리는 데이터를 계산식을 통해서 계산을 해 주어야 한다. 일단..캔버스에 클릭이벤트를 부여하여보자. 스크립트를 수정하자. const canvas = document.getElementById('canvas'); const ctx = canvas.getContext.. 2020. 2. 7. Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 9 : 원 그리기 원 그리기에 대해서 살펴보자. 원은 선 그리기와 비슷한 개념으로 다가가야한다. 캔버스에서 원은 라디안을 활용하기 때문에..라디안이 익숙치 않으므로 도(degree)로 표기해서 사용하면 그리기 쉽다. 음.."도"라는 개념이 왜 나오냐면...원은 총 360도를 가지고 있기 때문이다. 절반이면 180도 이니깐. 아래 소스코드를 실행하여보자. arc는 원(구)을 그리는 기능이다. 바로 그려지는 것은 아니고 stroke 또는 fill 등의 함수를 통해서 그리기를 완성 하여야 한다. 파라미터 순서를 잘 살펴보자. arc(x좌표, y좌표, 반지름, 시작각, 종료각, 반전여부) 위 내용을 실행하면, 다소 생소하다. 시작각과 종료각은 뭐란말인가.. 이를 이해하려면 몇번 소스코드를 수정해서 값이 어떻게 변하는지 보는게 가.. 2020. 2. 7. 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. 이전 1 2 3 4 다음
