간략한 튜토리얼
ScratchCard는 휴대폰을 지원하는 HTML5 캔버스 스크래치 카드 플러그인입니다. 이 스크래치 카드 플러그인은 모바일 터치 이벤트를 지원하고 스크래치 카드에 대한 콜백 기능을 제공합니다. 사용하기 쉽고 효과가 매우 좋습니다.
사용법
Scratch.js 파일을 페이지에 도입하세요.
1 |
|
HTML 구조
다음 HTML 구조를 사용하여 스크래치 카드를 만듭니다.
1 2 3 4 5 6 |
|
CSS 스타일
스크래치 카드 스타일에 다음 CSS를 추가합니다. .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|
초기화 플러그인
페이지 하단의 태그가 끝나기 전에 다음 코드를 사용하여 스크래치 카드 개체를 인스턴스화합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
구성 매개변수
캔버스 스크래치 카드 플러그인의 사용 가능한 구성 매개변수는 다음과 같습니다.
canvasId: 캔버스의 ID입니다.
imageBackground: 배경 이미지(스크래치 후 나타나는 이미지).
pictureOver: 전경 사진.
sceneWidth: 캔버스의 너비.
sceneHeight: 캔버스의 높이.
반경: 지워진 영역의 반경입니다.
nPoints: 청소된 영역의 노이즈 포인트 수입니다.
%: 캔버스를 지우기 전에 지울 영역 수입니다.
커서: 커서.
png: png 형식의 커서입니다.
x: 위치 x를 이동합니다.
y: y 위치로 이동합니다.
cur: cur 형식의 커서(IE에서 사용)
ScratchCard 캔버스 스크래치 카드 플러그인의 github 주소는 다음과 같습니다: https://github.com/Masth0/ScratchCard
위는 캔버스 스크래치 카드입니다. 플러그인 내용은 PHP 중국어 홈페이지(m.sbmmt.com)를 참고하시면 더 많은 관련 내용을 보실 수 있습니다!