前言
HTML5的canvas有很多應用點，如繪畫板、圖形繪制、游戲交互、彩票刮刮樂等，除了這些，還有個比較好的點就是主頁塗抹一部分之后，頁面消失進入主要內容。
wScratch是一個模擬刮刮卡的jQuery插件，可以設置刮開純色或者圖像。
演示
顯示刮卡百分比
到達一定百分比清空
屬性設置
可用的屬性，以下是默認值
|
1
2
3
4
5
6
7
8
9
10
|
$('#elem').wScratchPad({
size : 5, // The size of the brush/scratch.
bg : '#cacaca', // Background (image path or hex color).
fg : '#6699ff', // Foreground (image path or hex color).
realtime : true, // Calculates percentage in realitime.
scratchDown : null, // Set scratchDown callback.
scratchUp : null, // Set scratchUp callback.
scratchMove : null, // Set scratcMove callback.
cursor : 'crosshair' // Set cursor.
});
|
關於realtime，當設置為false時，百分比的計算僅在scratchUp抬起時計算，此方法可以用於提高性能。
關於bg和fg，值可以為含#號的10進制顏色，或者是圖片路徑。
使用方法及API
引入JS文件
|
1
|
<script type="text/javascript" src="./wScratchPad.min.js"></script>
|
塗抹百分比
|
1
2
3
4
5
|
$("#elem").wScratchPad({
scratchDown: function(e, percent){ console.log(percent); },
scratchMove: function(e, percent){ console.log(percent); },
scratchUp: function(e, percent){ console.log(percent); }
});
|
設置值的其他寫法
|
1
2
3
4
5
6
7
8
|
var sp = $("#elem").wScratchPad();
sp.wScratchPad('size', 5);
sp.wScratchPad('cursor', 'url("./cursors/coin.png") 5 5, default');
// Or directly with element.
$("#elem").wScratchPad('image', './images/winner.png');
|
方法
|
1
2
3
|
$('#elem').wScratchPad('reset');
$('#elem').wScratchPad('clear');
$('#elem').wScratchPad('enabled', <boolean>);
|
官方主頁
Github: https://github.com/websanova/wScratchPad
插件相關應用
- wPaint – 簡潔的繪畫板插件
- wColorPicker – 顏色采集面板插件
在手機端應用
這個插件是為jQuery設計的，而移動端的庫為zepto，所以這里將插件改造成適用於zepto的版本。
下載地址
1. wScratch.js
realtime卡頓
上面介紹的realtime這個屬性，即實時計算百分比，若設置為true，在PC端沒有問題，但是再手機端就有壓力了，會出現卡頓的情況，所以建議設置為false，並在scratchUp的時候檢查百分比即可。
移動端例子
http://www.xuanfengge.com/demo/201501/wScratch/demo.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$("#mask_index").wScratchPad({
size : 40,
bg : "",
fg : "p1_bg.jpg",
realtime : false,
scratchDown : null,
scratchUp : function(e, percent){
if(percent > 2){
this.clear();
this.enable("enabled", false);
$("#mask_index").hide(300);
}
},
scratchMove : function(e, percent){
console.log(percent);
},
cursor: "crosshair"
});
|