前言

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: 

插件相关应用

•  – 简洁的绘画板插件
•  – 颜色采集面板插件

在手机端应用

这个插件是为jQuery设计的，而移动端的库为zepto，所以这里将插件改造成适用于zepto的版本。

下载地址

1. 

2. 

realtime卡顿

上面介绍的realtime这个属性，即实时计算百分比，若设置为true，在PC端没有问题，但是再手机端就有压力了，会出现卡顿的情况，所以建议设置为false，并在scratchUp的时候检查百分比即可。

移动端例子

 

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" });