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

간략한 튜토리얼

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

사용법

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

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

HTML 구조

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

<div class="scratch_container">
  <div class="scratch_viewport">
    <!-- result picture -->
    <canvas id="js-scratch-canvas"></canvas>
  </div>
</div>

CSS 스타일

스크래치 카드 스타일에 다음 CSS를 추가합니다. .

.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;
}

초기화 플러그인

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

var scratch = new Scratch({
    canvasId: 'js-scratch-canvas',
    imageBackground: 'loose.jpg',
    pictureOver: 'foreground.jpg',
    cursor: {
        png: 'piece.png',
        cur: 'piece.cur',
        x: '20',
        y: '17'
    },
    radius: 20,
    nPoints: 100,
    percent: 50,
    callback: function () {
      alert('I am Callback.');
    },
    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 중국어 홈페이지(www.php.cn)를 참고하시면 더 많은 관련 내용을 보실 수 있습니다!