首页 > 代码库 > HTML5模仿刮奖效果-页面涂抹消失插件wScratch

HTML5模仿刮奖效果-页面涂抹消失插件wScratch

2024-09-08 13:02:56   223人阅读

前言

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

2. wScratch.min.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"
});
 

HTML5模仿刮奖效果-页面涂抹消失插件wScratch


联系
我们