>  기사  >  웹 프론트엔드  >  canvas-scratch-off에 대한 예제 튜토리얼

canvas-scratch-off에 대한 예제 튜토리얼

零下一度
零下一度원래의
2017-07-25 09:37:413305검색

오늘은 지난 글의 복권 게임과 결합하여
캔버스를 사용하여 작은 게임 - 스크래치 오프를 작성합니다.
먼저 캔버스를 사용하여 너비와 높이가 200px인 캔버스를 만듭니다. 그런 다음 캔버스에 범위 태그를 배치합니다. ㅋㅋㅋ 스퀘어 라이브.

canvas-scratch-off에 대한 예제 튜토리얼



효과는 다음과 같습니다

canvas-scratch-off에 대한 예제 튜토리얼



캔버스로 투명한 원을 만들고, 캔버스의 회색 레이어를 지워서 텍스트를 표시합니다. 아래(1등상).

canvas-scratch-off에 대한 예제 튜토리얼


효과는 다음과 같습니다



canvas-scratch-off에 대한 예제 튜토리얼


마지막으로 방금 정의한 배열을 무작위로 섞은 다음 회색 레이어를 지우면 다른 상품을 표시합니다.


canvas-scratch-off에 대한 예제 튜토리얼


효과는 다음과 같습니다

canvas-scratch-off에 대한 예제 튜토리얼


도움이 되셨으면 좋겠습니다, 감사합니다!

위 내용은 canvas-scratch-off에 대한 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.