방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Html 캔버스44 HTML 캔버스에서 이미지 왜곡하기(canvas image warp, distorted) 캔버스에서 이미지를 왜곡하는 방법을 간단히 소개 합니다. 이미지를 왜곡하기 위해서는 "워핑(warping)" 이라는 방법이 필요한데, 영상과 관련된 기술에서 이미지 워핑(image warping)이라는 이름으로 이미 범용적으로 사용되는 기술 입니다. 해당 기능을 구현하기 위해서는 2가지의 접근법이 필요 합니다. 1. 위치 변환 함수를 통해 위치를 변환한다. 2. 위치 변환 함수를 이용해서 실제로 픽셀을 옮긴다. 먼저 캔버스에 이미지를 로딩 합니다. canvas0 아이디는 원본 이미지를 표현할 캔버스이며, canvas1 아이디는 왜곡할 캔버스 이미지 입니다. 위 코드를 실행하면 간단한 사진을 볼 수 있습니다. 이미지를 왜곡하기 위해서는 캔버스에 사용된 이미지 데이터를 가져와서 각 구간별로 색상값을 조정해 .. 2024. 1. 31. 리액트 환경에서의 캔버스 (React Html canvas) 리엑트로 다양한 기능을 만들다가 캔버스(canvas)를 사용하기 위해 구글링을 좀 해 보았습니다. 대략 아래처럼 캔버스 객체(context)에 대해서 상태(state)를 유지하는 코드가 참 많았습니다. const ref = useRef(null); const [ctx, setCtx] = useState(); //캔버스 컨텍스트를 useState로 상태관리 useEffect(()=>{ const canvas = ref.current const context = canvas.getContext('2d') setCtx(context) }, []) useEffect를 통해서 캔버스의 컨텍스트 객체(context)를 가져오기 위해서 ctx값을 state로 관리해야 합니다. 안그러면 ctx객체에 대한 상태관리가 필.. 2022. 6. 3. HTML Canvas Path2D(쉬운 이벤트제어를 위한 Path2D) 캔버스에서 이벤트를 제어하기 위해서는 그려진 데이터를 기준으로 사각형, 원, 다각형 등으로 구분하여 수학적인 계산 방법을 통하여 달아주고는 합니다. 사각형은 시작점과 종료점 사이에 클릭한 좌표값이 존재하는지를 확인하며 원은 클릭한 지점부터 원의 중심점의 반지름보다 작은지 큰지 등을 통하여 확인하고 다각형은 다각형 내부의 접점의 개수를 판별하여(홀수) 이벤트를 부여합니다. 이러한 계산방법이 어렵고 적용하기 힘든 경우에는 Path2D 객체를 사용하면 조금 더 쉽게 적용 할 수 있습니다. Path2D의 기본 사용법은 어렵지 않습니다. let canvas = document.getElementById('canvas') as HTMLCanvasElement; const ctx = canvas.getContext(.. 2022. 4. 22. HTML Canvas video webcam(캔버스 비디오 웹캠) 캔버스(canvas)를 활용하여 웹캠 정보를 재생하는 내용 입니다. 웹에서의 웹캡 비디오 스트림은 navigator 객체에서 useMedia 함수를 사용하면 가져올 수 있습니다. navigator.mediaDevices.getUserMedia({ video: true }) 이렇게 getUserMedia를 통하여 콜백으로 받은 스트림 객체는 비디오(vedio) 엘리먼트의 srcObject의 값으로 대입할 수 있습니다. getUserMedia 함수가 프로미스(Promise) 형식으로 되어 있어 then 함수를 호출하여 만나볼 수 있습니다. navigator.mediaDevices.getUserMedia({ video: true }).then( stream=>{ //비디오 스트림 : stream }) 여기까지.. 2022. 4. 15. HTML Canvas 퍼즐(puzzle) 캔버스로 구현해본 퍼즐 입니다. 퍼즐은 그림을 나누어서 구역을 맞추는 게임 입니다. Html canvas로 구현하기 위해서는 먼저 사각형을 그리는 방법과, 대입된 이미지 값 에서 주어진 좌표 크기만큼 가져오는 방법을 알아야 쉽게 다가갈 수 있습니다. 가장 먼저 작업한 것은 바로 구역을 나누는 행위 입니다. 가장 쉽게구현 할 수 있는 방법이 사각형 이므로 사각형 모양을 그려주기 위해 2중배열을 적용합니다. 위 2중배열에서 변수 j값은 x좌표의 거리를 위해 사용되었고, 변수 i 값은 y좌표 거리를 위해 사용 되었습니다. 또한 정사각형을 그려주기 위해서 cubeSize라는 변수를 사용하여 주었습니다. 이를 먼저 1차적으로 표현하면 아래 사진과 같은 모양을 그릴 수 있습니다. 사각형을 그리는 것은 매우 쉬운 일.. 2022. 3. 30. HTML Canvas 사다리 타기(ladder, ghost leg, Amidakuji) * 게시글 하단의 제 깃허브 주소를 통해 실제 구현된 모습을 볼 수 있습니다 이번에 구현한 기능은 사다리타기 기능 입니다. 사다리 타기는 주어진 세로형태의 선에 본인이 원하는 선을 붙여서 만드는 기능입니다. 사다리 기능을 구현하기 위해서는 먼저 세로형태의 선을 그려줄 필요가 있습니다. 캔버스의 넓이를 가져온 다음에 그릴 갯수만큼 나누어준 뒤, 최소 넓이의 절반을 더해서 여백을 주도록 합니다. 높이는 전부 길게 할 경우에 여백이 생기지 않으므로 적절한 비율을 선택해 곱해 줍니다. 이렇게 하고난 뒤에 시작과 끝 정보를 배열에 담아줍니다. 1차로 완성된 모습입니다. 다음으로 고민한 것이 이제 선을 그려준 뒤에 어떻게 찾아가게 할 지였습니다. 사다리에서의 규칙은 위에서 아래로 내려가는 것 이므로, 각각의 선의 .. 2022. 2. 22. 이전 1 2 3 4 ··· 8 다음
