簡短教學
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網（m.sbmmt.com）！
