방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 전체 글674 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. 신입 프로그래머, 프로그래머 직무 및 입사지원 유의사항 컴퓨터 프로그래머는 하드웨어 또는 소프트웨어를 개발하고 만드는 사람을 의미 합니다. 특히 요즘같은 코로나 시대에는 많은수의 기업들이 다양한 방법을 통하여 업무를 전산화 하고 있습니다. 메신저, 공유프로그램, 전자결재 등등.. 이러한 전산화 된 기술은 업무의 효율성을 높혀주고 생산성을 빠르게 해 줍니다. 구직사이트(잡XXX, 사XX, 원XX 등등)를 살펴보아도 많은 기업에서 프로그래머를 채용하려는 채용공고가 확연이 많은 점을 볼 수 있습니다. 그러므로 컴퓨터 프로그래머라는 직종은 미래에도 충분히 가치가 있다고 생각 합니다. 아무리 인공지능이 뛰어나더라도 과연 프로그래밍까지 알아서 해 주는 기능이 그리 쉽게 탄생할 수 있을까요? http://www.goodjobnews.co.kr/news/view.php?n.. 2022. 2. 4. Watch 함수를 통한 몽고DB 트리거 만들기(mongoDB watch trigger) 몽고DB에서 제공하는 watch 함수를 사용하면 트리거를 만들 수 있습니다. 몽고DB는 트리거(trigger)를 제공하지 않기 때문에 관계형 데이터베이스처럼 데이터의 변화에 따른 행동을 정의하기가 다소 불편했던 것은 사실 입니다 * 2022년 1월 기준 몽고db에서는 컬렉션 객체에서 watch 함수를 지원 합니다. https://docs.mongodb.com/manual/reference/method/db.collection.watch/ db.collection.watch() — MongoDB Manual Docs Home → MongoDB Manualdb.collection.watch( pipeline, options )mongosh MethodThis is a mongosh method. This i.. 2022. 1. 28. HTML Canvas 배경 이미지 슬라이딩(slide background image) * 게시글 하단의 제 깃허브 주소를 통해 실제 구현된 모습을 볼 수 있습니다 백그라운드에서 이미지가 자연스럽게 슬라이딩하는 애니메이션을 소개합니다. 비교적 가볍게 구현할 수 있습니다. 달리기 하는 게임류를 보면 뒷 배경이 움직이면서 캐릭터가 달리기를 하는 모양을 보곤 합니다. 대표적인 게임을 보면...윈드러너를 예로 들 수 있겠습니다. 이처럼 뒷 배경이 계속해서 움직이도록 하려면 아주 긴 이미지의 x좌표값을 0에서 이미지의 길이 값 만큼 변경 해 가면 이러한 효과를 줄 수 있습니다. 캔버스에서 이미지를 그리는 함수는 drawImage입니다. ctx.drawImage('이미지데이터',x좌표,y좌표,이미지길이,이미지넓이) 그런데 이미지의 길이가 짧다면, 이러한 방법으로는 한계가 있습니다. 먼저 한계가 있는 .. 2022. 1. 24. 이전 1 ··· 17 18 19 20 21 22 23 ··· 113 다음
