支援行動手機的canvas刮刮卡插件

簡短教學

ScratchCard是一款支援行動手機的HTML5 canvas刮刮卡外掛程式。此刮刮卡外掛程式支援移動觸控事件，提供刮卡的回呼函數，簡單易用，效果非常好。

使用方法

在頁面中引入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}
});

設定參數

該Canvas刮刮卡插件的可用設定參數有：

• canvasId：canvas的id。

• imageBackground：背景圖片（刮開後呈現的圖片）。

• pictureOver：前景圖。

• sceneWidth：canvas的寬度。

• sceneHeight：canvas的高度。

• radius：清除區域的半徑。

• nPoints：清除區域的雜點數量。

• percent：清除多少區域後清空canvas。

• cursor：遊標。

• png：png格式的遊標。

• x：Move position x。

• y：Move position y。

• cur：cur格式的遊標（IE使用）。

ScratchCard canvas刮刮卡插件的github位址為：https://github.com/Masth0/ScratchCard

以上就是支援手機的canvas刮刮卡插件的內容，更多相關內容請關注PHP網（www.php.cn）！