> 웹 프론트엔드 > HTML 튜토리얼 > 휴대폰을 지원하는 캔버스 스크래치 카드 플러그인

휴대폰을 지원하는 캔버스 스크래치 카드 플러그인

黄舟
풀어 주다: 2017-01-18 14:34:19
원래의
1443명이 탐색했습니다.

간략한 튜토리얼

ScratchCard는 휴대폰을 지원하는 HTML5 캔버스 스크래치 카드 플러그인입니다. 이 스크래치 카드 플러그인은 모바일 터치 이벤트를 지원하고 스크래치 카드에 대한 콜백 기능을 제공합니다. 사용하기 쉽고 효과가 매우 좋습니다.

사용법

Scratch.js 파일을 페이지에 도입하세요.

1

<script type="text/javascript" src="js/Scratch.js"></script>

로그인 후 복사

HTML 구조

다음 HTML 구조를 사용하여 스크래치 카드를 만듭니다.

1

2

3

4

5

6

<div class="scratch_container">

  <div class="scratch_viewport">

    <!-- result picture -->

    <canvas id="js-scratch-canvas"></canvas>

  </div>

</div>

로그인 후 복사

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

.scratch_container {

  position: relative;

  margin: 0 auto;

  max-width: 1024px;

}

  

.scratch_viewport {

  position: relative;

  width: 250px;

  height: 250px;

  margin: 0 auto;

  z-index: 0;

}

  

.scratch_picture-under {

  position: absolute;

  top: 0;

  left: 0;

  display: block;

  z-index: -1;

}

  

.scratch_container canvas {

  position: relative;

  width: 100%;

  height: auto;

  z-index: 1;

}

로그인 후 복사

초기화 플러그인

페이지 하단의 태그가 끝나기 전에 다음 코드를 사용하여 스크래치 카드 개체를 인스턴스화합니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

var scratch = new Scratch({

    canvasId: &#39;js-scratch-canvas&#39;,

    imageBackground: &#39;loose.jpg&#39;,

    pictureOver: &#39;foreground.jpg&#39;,

    cursor: {

        png: &#39;piece.png&#39;,

        cur: &#39;piece.cur&#39;,

        x: &#39;20&#39;,

        y: &#39;17&#39;

    },

    radius: 20,

    nPoints: 100,

    percent: 50,

    callback: function () {

      alert(&#39;I am Callback.&#39;);

    },

    pointSize: { x: 3, y: 3}

});

로그인 후 복사

구성 매개변수

캔버스 스크래치 카드 플러그인의 사용 가능한 구성 매개변수는 다음과 같습니다.

  • 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)를 참고하시면 더 많은 관련 내용을 보실 수 있습니다!


원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿