방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com No free2 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. HTML Canvas 슬롯머신 기능(slot machine, 빠찡꼬, 파친코) * 게시글 하단의 제 깃허브 주소를 통해 실제 구현된 모습을 볼 수 있습니다 HTML 캔버스를 활용하여 만들어본 슬롯머신 기능(slot machine, 빠찡꼬, 파친코) 입니다. 슬롯 머신이란 아래 사진처럼 나누어진 구역에서 컨텐츠가 세로로 회전하여 목적값에 도달하는 기능입니다. 이를 캔버스에서 구현하기위해 기능을 분석하여 보았습니다. 1. 구역 나누기 2. 숫자 배치 3. 회전 속도 에니메이션 4. 목적지에 도달 시 에니메이션 종료 먼저 구역을 나누는 작업입니다. 여기에서는 총 4개의 구역으로 나눌 예정이라 먼저 position이라는 배열값에 4개의 넓이를 나누어 넣어주었습니다. 그리고 높이는 서로 같기 때문에 따로 추가하지는 않습니다. 캔버스 작업을 하면 항상 잊지말고 해주는 것이 save와 rest.. 2022. 1. 18. 이전 1 다음
