ScratchAward

功能描述

本模块是移动端刮刮卡控件,实现刮卡中奖功能,可设置中奖几率,自定义中奖显示。

快速使用

1.引入CSS文件

<link rel="stylesheet" type="text/css" href="css/style.css">

2.引入JS文件

<script type="text/javascript" src="script/scratchaward.js"></script>

3.初始化插件

示例代码

  1. //初始化插件
  2. var scratch = new Scratch({
  3. canvasId : 'js-scratch-canvas', //画布ID
  4. imageBackground : imageBackgroundURL, //刮开的图片URl
  5. pictureOver : './images/foreground.jpg', //前景图片URL
  6. cursor : {
  7. png : './images/scratch.png', //手势图片URL
  8. cur : './images/scratch.cur', //手势图标URL
  9. x : '20',
  10. y : '17'
  11. },
  12. radius : 15, //刮的大小
  13. nPoints : 150, //刮的密度
  14. percent : 30, //刮开的区域百分比,用于回调函数
  15. callback : function() {
  16. if (imageBackgroundURL == imagearr[0]) {
  17. alert("恭喜你中了一等奖!");
  18. } else if (imageBackgroundURL == imagearr[1]) {
  19. alert("恭喜你中了二等奖!");
  20. } else if (imageBackgroundURL == imagearr[2]) {
  21. alert("恭喜你中了三等奖!");
  22. } else {
  23. alert("未中奖,下次继续努力!");
  24. }
  25. },
  26. pointSize : {
  27. x : 3,
  28. y : 3
  29. }
  30. });

特别说明

,示例只提供了部分代码,详细用法见index.html