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

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

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


캔버스6

HTML 캔버스에서 이미지 왜곡하기(canvas image warp, distorted) 캔버스에서 이미지를 왜곡하는 방법을 간단히 소개 합니다. 이미지를 왜곡하기 위해서는 "워핑(warping)" 이라는 방법이 필요한데, 영상과 관련된 기술에서 이미지 워핑(image warping)이라는 이름으로 이미 범용적으로 사용되는 기술 입니다. 해당 기능을 구현하기 위해서는 2가지의 접근법이 필요 합니다. 1. 위치 변환 함수를 통해 위치를 변환한다. 2. 위치 변환 함수를 이용해서 실제로 픽셀을 옮긴다. 먼저 캔버스에 이미지를 로딩 합니다. canvas0 아이디는 원본 이미지를 표현할 캔버스이며, canvas1 아이디는 왜곡할 캔버스 이미지 입니다. 위 코드를 실행하면 간단한 사진을 볼 수 있습니다. 이미지를 왜곡하기 위해서는 캔버스에 사용된 이미지 데이터를 가져와서 각 구간별로 색상값을 조정해 .. 2024. 1. 31.
HTML Canvas Path2D(쉬운 이벤트제어를 위한 Path2D) 캔버스에서 이벤트를 제어하기 위해서는 그려진 데이터를 기준으로 사각형, 원, 다각형 등으로 구분하여 수학적인 계산 방법을 통하여 달아주고는 합니다. 사각형은 시작점과 종료점 사이에 클릭한 좌표값이 존재하는지를 확인하며 원은 클릭한 지점부터 원의 중심점의 반지름보다 작은지 큰지 등을 통하여 확인하고 다각형은 다각형 내부의 접점의 개수를 판별하여(홀수) 이벤트를 부여합니다. 이러한 계산방법이 어렵고 적용하기 힘든 경우에는 Path2D 객체를 사용하면 조금 더 쉽게 적용 할 수 있습니다. Path2D의 기본 사용법은 어렵지 않습니다. let canvas = document.getElementById('canvas') as HTMLCanvasElement; const ctx = canvas.getContext(.. 2022. 4. 22.
Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 12 : 이벤트 관리3 이벤트를 부여하는 방법 세번째 시간이다. 앞선 시간에는 사각형, 원에대해서 알아보았다면 여러 모양을 지닌 다각형에 대해서 이벤트를 주는 방법이다. 다각형은 말 그대로 여러 각을 지닌 도형을 의미한다. 아래 사진을 보자. 위 사진처럼 특정 도형이 존재한다고 보자. 사각형에 이벤트를 부여하는 방법을 쓰기에는 빈 공간이 너무 많다. 마찬가지로 원에서 사용한 방법을 쓰기에도 중간이 아에 비어버렸으며, 마찬가지로 빈 공간이 많다. 즉, 기존에 원과 사각형에서 사용한 알고리즘을 적용시킬 수 없다라는 것 이다. 먼저 영역인 곳과 영역이 아닌곳을 클릭했다고 하여 보자. 빨강색 원은 영역이 아닌곳을 클릭한 경우, 검은색 원은 영역 내부를 클릭한 경우라고 하여보자. 사람은 한눈에 3군데는 아닌곳을 선택했고, 2군데가 도형.. 2020. 2. 11.
Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 8 : 확대와 영역 scale에 대해서 먼저 살펴보자. 캔버스에서의 scale 기능은 줌인, 줌아웃 효과를 위해서 사용된다. 아래 코드를 실행하여보자. 분명 같은 x좌표, y좌표와 같은 넓이와 높이였음에도 불구하고 사각형의 크기와 위치가 전혀 다르게 나타난 것을 볼 수 있다. 특정 줌 인, 줌 아웃 이벤트시에 해당 기능이 왠지 요긴하게 쓰일 것 같다. 여기서도 마찬가지로 save와 restore를 적절하게 사용해서 초기값으로 돌아가기 편리하게 한 점을 다시한번 살펴보아야 한다. 다음으로 살펴볼 기능은 clip 이라는 기능이다. clicp은 구멍뚫기(?) 효과를 나타내는데.. 특정 영역에 효과를 선언하면 해당 효과를 제외한 나머지는 안보인다. (뭔소리??) 아래 사진을 보자. 위 사진과 같이 구멍(hole)영역을 지정한뒤에,.. 2020. 2. 7.
Html Canvas (Html 캔버스) 튜토리얼 (차트만들기!) - 6 : 이미지 그리기 캔버스에서 이미지를 그리는 것은 이미지 데이터를 읽어서 캔버스에 일일이 그리는 것 처럼 텍스트, 선 또는 원을 그리는 방식과 비슷하다. 그러니까..선을 그리는 것이나 이미지를 그리는 것이나 같다라는 점 이다. 일단 이미지를 그려보기 위해서 이미지를 제작하였다.(파워포인트로..) 요 이미지를 가져와서 캔버스에 적용하는 것은 Image라는 객체를 사용하여 실시 하였다. 이미지내용이 불러와지면 캔버스에 그리기 행위를 실시 하였다. drawImage라는 함수의 첫번째 값은 이미지 객체, 두번째는 x좌표, 세번째는 y좌표이다. 위 이미지를 불러와서 그림을 그리면 아래모양처럼 나온다. 뭔가 이미지를 그렸는데..사이즈가 안맞으니 속상하다. 이럴때는 drawImage에서 네번째와 다섯번째에 이미지가 그려질 사이즈를 지.. 2020. 2. 3.
Html 캔버스 Hover 이벤트 만들기 Html 캔버스에서는 그림을 그린 다음 그림을 1개의 객체로 보관하는 것이 아니라 그림 통째로 보관한다. 즉, html에서 div태그로 여러가지 그림을 그리면, 각각 이벤트나 움직임을 줄 수 있지만, 캔버스에서는 그렇지 않다. 왜냐하면 캔버스에서 객체는 1개이고, 그림을 사각형, 원형으로 그리더라도 그림1개로 저장되기 때문이다. 이를 해결하기 위해서는 수동으로 만드는 방법 밖에 없다. 원리는 간단하다. 사용자가 그림을 그릴 객체의 정보를 Javascript에서 배열이나 Object로 저장을 하고, 캔버스에서 마우스 이벤트를 감지하여 해당 영역에 값이 들어와있는지 계산하면 된다. const price = [50,50,20]; //x좌표, y좌표, 원 크기 const ctx = $(캔버스)[0].getCon.. 2019. 4. 26.

티스토리툴바