스크래치 카드를 플레이 했습니까? 우연히 이길 수있는 종류. 오늘은 HTML5 기술을 기반으로 스크래치 카드 효과를 공유하겠습니다. 마우스를 PC에 넣고 전화로 손가락을 잡고 레이어를 부드럽게 긁어서 실제 스크래치 효과를 시뮬레이션하면됩니다.
우리는 HTML5의 캔버스 캔버스를 사용하여 제공하는 API와 결합하여 캔버스 요소에 회색 마스크를 그린 다음 사용자의 마우스 움직임과 제스처를 감지하여 투명한 그림을 그립니다. 이렇게하면 캔버스 배경 아래의 실제 그림을보고 스크래치 카드 효과를 얻을 수 있습니다.
HTML캔버스 태그 요소 만 페이지에 추가하면 나머지는 JavaScript에 따라 다릅니다. 캔버스 요소는 HTML5에만 존재하며 HTML5를 지원하는 최신 브라우저에서 실행되는 요소입니다.
코드를 복사하십시오