방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 로또2 HTML Canvas 복권 긁기 효과(scratch, lottery) * 게시글 하단의 제 깃허브 주소를 통해 실제 구현된 모습을 볼 수 있습니다 이번 기능은 웹에서 가려진 화면을 긁어서 가려진 내용을 보는 기능 입니다. 현실에서의 예를 들면, 즉석복권(lottery)을 사면 가려진 부분을 긁게 되면 당첨여부를 볼 수 있는 것과 같습니다. 사실 이러한 기능을 만드는 것은 매우 쉽습니다. 캔버스 뒷부분에 이미지를 넣고, 캔버스 전체 영역을 색상을주어서 채우고 난 뒤에 마우스 이벤트 여부에 따라서 캔버스의 globalCompositeOperation 객체의 값을 "destination-out" 으로 주면 끝날 일 입니다. 그런데 사용자는 모든 화면을 전부 지우고 싶어하지 않습니다. 일정 수준으로 그림이 지워지게 된 경우면 자동으로 지워져서 내용물이 보여지기를 원합니다. 그러면.. 2022. 2. 16. HTML Canvas 룰렛 기능(roulette) * 게시글 하단의 제 깃허브 주소를 통해 실제 구현된 모습을 볼 수 있습니다 HTML Canvas로 만든 룰렛 기능(roulette) 입니다. 룰렛은 원형 판이 빙글빙글 돌아가다 멈추는 기능입니다. 캔버스에서 이러한 룰렛기능을 만드려면 부채꼴(circular sector)을 그려주는 방법을 사용하면 됩니다. 원을 그려준 다음에 해당 각도를 계속해서 증가하면 빙글빙글 돌아 갈 것 입니다. 먼저 그려줄 부채꼴을 계산합니다. const canvas = document.getElementById('canvas') const ctx = canvas.getContext('2d') let width = canvas.width let height = canvas.height const devide = 12 //나눌 갯.. 2022. 1. 21. 이전 1 다음
