방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Html 캔버스/Html 캔버스 에니메이션19 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. HTML Canvas 복권 긁기 효과(scratch, lottery) * 게시글 하단의 제 깃허브 주소를 통해 실제 구현된 모습을 볼 수 있습니다 이번 기능은 웹에서 가려진 화면을 긁어서 가려진 내용을 보는 기능 입니다. 현실에서의 예를 들면, 즉석복권(lottery)을 사면 가려진 부분을 긁게 되면 당첨여부를 볼 수 있는 것과 같습니다. 사실 이러한 기능을 만드는 것은 매우 쉽습니다. 캔버스 뒷부분에 이미지를 넣고, 캔버스 전체 영역을 색상을주어서 채우고 난 뒤에 마우스 이벤트 여부에 따라서 캔버스의 globalCompositeOperation 객체의 값을 "destination-out" 으로 주면 끝날 일 입니다. 그런데 사용자는 모든 화면을 전부 지우고 싶어하지 않습니다. 일정 수준으로 그림이 지워지게 된 경우면 자동으로 지워져서 내용물이 보여지기를 원합니다. 그러면.. 2022. 2. 16. HTML Canvas 색상 선택기(color picker) * 게시글 하단의 제 깃허브 주소를 통해 실제 구현된 모습을 볼 수 있습니다 캔버스를 활용한 색상 선택기 입니다. 칼라피커, 칼라선택 등등의 기능이며 그리 어렵지 않는 기능입니다. 이미 "칼라피커" 라고 검색을 하면 다양한 라이브러리를 받아서 사용 할 수 있습니다. 캔버스를 활용하여 이를 비슷하게 구현하여보았습니다. 색상에 대한 배열값을 먼저 준비합니다. 대략적으로 190여개의 값을 지닌 배열을 만들어 준 뒤에 영역을 나누어주는 작업을 진행 합니다. * 색깔에 대한 190개 배열만드는게 가장 힘들었습니다.. 그리고 캔버스 자체에 이벤트를 부여하여 범위값에 대한 이벤트를 부여합니다. 여기서 칼라피커는 사각형 모양으로 할 예정이라 직사각형에 대한 이벤트 공식 방법을 사용 하였습니다. //내부 판별 함수 fu.. 2022. 2. 8. 이전 1 2 3 4 다음
