微信小程序实现刮刮乐刮奖功能

步骤1：

 ——————————————————  wxml具体代码

<view class="scratch_body">

  <image class="scratch_body_bg" mode="widthFix" src="{{bg}}"></image>

  <view class="scratch_time">您有 <text>{{cjNum}}</text> 次刮奖机会</view>

  <view class="scratch_do">

    <view class="scratch_do_after">

      <view wx:if="{{hasPrize}}" class="scratch_do_after_box">

        <image mode="widthFix" src="{{gz}}"></image>

        <view>恭喜你刮中{{prizeName}}</view>

        <view class="scratch_do_after_btn" bindtap="gj">再来一次</view>

      </view>

      <view wx:else class="scratch_do_after_box">

        <view>很遗憾未中奖</view>

        <view class="scratch_do_after_btn" bindtap="gj">再来一次</view>

      </view>

    </view>

    <canvas wx:if="{{!gjEnd}}" class="scratch_do_in" disable-scroll="false" canvas-id='canvas-demo' bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"></canvas>

    <cover-image wx:if="{{showGjBth}}" class="scratch_do_before" src="{{gj}}" bindtap="gj"></cover-image>

  </view> 

</view>

步骤2：

—————————————————————— wxss具体代码

page{ box-sizing: border-box; padding-top: 50rpx; background-color: #3b0a8e;}

.scratch_body{ width: 630rpx; padding-top: 24rpx; margin: 0 auto; position: relative;}

.scratch_body_bg{ width: 100%; position: absolute; left: 0; top: 0;}

.scratch_time{ width: 440rpx; height: 64rpx; margin: 0 auto 20rpx auto; text-align: center; color: #e81903; font-size: 28rpx; position: relative;}

.scratch_time text{ font-size: 42rpx;}

.scratch_do{ width: 570rpx; height: 213rpx;/* margin: 0 auto 160rpx auto; */ margin: 0 auto 110rpx auto; position: relative;}

.scratch_do_after , .scratch_do_after_box , .scratch_do_after_box image , .scratch_do_in , .scratch_do_before{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;}

.scratch_do_after_box{ padding-top: 25rpx; line-height: 82rpx; color: #7a7a7a; font-size: 40rpx; text-align: center;}

.scratch_do_after_box view{ position: relative;}

.scratch_do_after_btn{ width: 210rpx; height: 54rpx; line-height: 54rpx; margin: 0 auto; color: #fff; font-size: 30rpx; border-radius: 27rpx; background-color: #ff3c9d;}

.scratch_btn{ width: 310rpx; height: 64rpx; margin: 34rpx auto 0 auto; border: #fff solid 2rpx; border-radius: 32rpx; position: relative;

  display: flex; justify-content: center; align-items: center;

  box-shadow: 0 0 15px 5px rgba(102,12,164,.8);

}

.scratch_btn view{ width: 300rpx; height: 52rpx; line-height: 52rpx; text-align: center; color: #3b0a8e; font-size: 30rpx; font-weight: bold; background-color: #fff; border-radius: 26rpx;}

步骤三：

——————————————————————js代码

var app = getApp();

import Scratch from '../../utils/util.js'

let cjIn = false; //防止多次点击

Page({

  data: {

    bg:"/static/bg.png",

    gz:"/static/gz.png",

    gj:"/static/gj.png",

    gjEnd: false, //是否刮奖结束

    showGjBth: true, //是否显示刮奖按钮

    again: false, //是否显示再来一次按钮

    cjNum: '', //抽奖机会

    resaultSrc: '', //中奖显示图

    hasPrize: '', //是否中奖

    prizeName: '', //奖品名称

  },

  //刮奖设置

  gj() {

    let This = this;

    if (!This.data.cjNum) {

      wx.showModal({

        title: '很抱歉',

        content: '没有机会啦~',

        showCancel: false,

      })

      return;

    }

    //防止多次点击

    if (cjIn) {

      return;

    } else {

      cjIn = true;

    }

    //再次刮奖

    let timeOutTime = 0;

    if (This.data.gjEnd) {

      //先显示canvas

      This.setData({

        gjEnd: false, //是否刮奖结束

      });

      timeOutTime = 100;

    }

    setTimeout(function() {

      //初始化刮奖界面 ，重置刮奖层状态

      new Scratch(This, {

        canvasId: 'canvas-demo',

        width:570,

        height:213,

        scale:.5,

      })

      setTimeout(function() {

        This.setData({

          showGjBth: false, //是否显示刮奖按钮

          again: false, //是否显示再来一次按钮

          cjNum: 3, //抽奖机会

          resaultSrc: '', //中奖显示图

          hasPrize: true, //是否中奖

          prizeName: '平板', //奖品名称

        });

      }, 100)

    }, timeOutTime)

  },

  //刮卡已刮干净

  clearCanvas() {

    let This = this;

    setTimeout(function() {

      //隐藏CANVAS

      This.setData({

        gjEnd: true, //是否刮奖结束

      });

    }, 100)

    if (!This.data.again) {

      cjIn = false;

      //刮卡刮干净后 显示的界面 ，显示再刮一次按钮（页面中已注释）

      This.setData({

        again: true,

      });

    }

  },

  //获取抽奖机会次数

  getNum() {

    let This = this;

    // 请求接口

    This.setData({

      cjNum: 3,

    });

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function(options) {

  },

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady: function() {

  },

  /**

   * 生命周期函数--监听页面显示

   */

  onShow: function() {

    cjIn = false;

    let This = this;

    This.setData({

      gjEnd: false, //是否刮奖结束

      showGjBth: true, //是否显示刮奖按钮

      again: false,//是否显示再来一次按钮

      resaultSrc: '', //中奖显示图

      hasPrize: '', //是否中奖

    });

    This.getNum(); //获取抽奖机会次数

  }

})

步骤四：

___________________公共封装util.js代码 （新建util.js并在js内引入 ，注意引用路径正确）

class Scratch {

  constructor(page, opts) {

    opts = opts || {};

    this.page = page;

    this.canvasId = opts.canvasId || 'canvas';

    this.width = opts.width || 300;

    this.height = opts.height || 300;

    this.maskColor = opts.maskColor || '#dddddd';

    this.size = opts.size || 15,

    //this.r = this.size * 2;

    this.r = this.size;

    this.area = this.r * this.r;

    //this.scale = opts.scale || 0.7;

    this.scale = opts.scale || .5;

    this.totalArea = this.width * this.height;

    this.init();

  }

  init() {

    this.show = false;

    this.clearPoints = [];

    this.ctx = wx.createCanvasContext(this.canvasId, this);

    this.drawMask();

    this.bindTouch();

  }

  drawMask() {

    this.ctx.setFillStyle(this.maskColor);

    this.ctx.fillRect(0, 0, this.width, this.height);

    this.ctx.draw();

  }

  bindTouch() {

    this.page.touchStart = (e) => {

      this.eraser(e, true);

    }

    this.page.touchMove = (e) => {

      this.eraser(e, false);

    }

    this.page.touchEnd = (e) => {

      if (this.show) {

        this.page.clearCanvas();

        this.ctx.clearRect(0, 0, this.width, this.height);

        this.ctx.draw();

      }

    }

  }

  eraser(e, bool) {

    let len = this.clearPoints.length;

    let count = 0;

    let x = e.touches[0].x,

      y = e.touches[0].y;

    let x1 = x - this.size;

    let y1 = y - this.size;

    if (bool) {

      this.clearPoints.push({

        x1: x1,

        y1: y1,

        x2: x1 + this.r,

        y2: y1 + this.r

      })

    }

    for (let item of this.clearPoints) {

      if (item.x1 > x || item.y1 > y || item.x2 < x || item.y2 < y) {

        count++;

      } else {

        break;

      }

    }

    if (len === count) {

      this.clearPoints.push({

        x1: x1,

        y1: y1,

        x2: x1 + this.r,

        y2: y1 + this.r

      });

    }

    //添加计算已清除的面积，达到标准值后，设置刮卡区域刮干净

    let clearNum = parseFloat(this.r * this.r * len) / parseFloat(this.scale * this.totalArea);

    if (!this.show) {

      this.page.setData({

        clearNum: parseFloat(this.r * this.r * len) / parseFloat(this.scale * this.totalArea)

      })

    }

    if (clearNum > .2) {

    //if (len && this.r * this.r * len > this.scale * this.totalArea) {

      this.show = true;

    }

    this.clearArcFun(x, y, this.r, this.ctx);

    this.ctx.draw(true);

  }

  clearArcFun(x, y, r, ctx) {

    let stepClear = 1;

    clearArc(x, y, r);

    function clearArc(x, y, radius) {

      let calcWidth = radius - stepClear;

      let calcHeight = Math.sqrt(radius * radius - calcWidth * calcWidth);

      let posX = x - calcWidth;

      let posY = y - calcHeight;

      let widthX = 2 * calcWidth;

      let heightY = 2 * calcHeight;

      if (stepClear <= radius) {

        ctx.clearRect(posX, posY, widthX, heightY);

        stepClear += 1;

        clearArc(x, y, radius);

      }

    }

  }

}

export default Scratch

静态资源（新建一个放静态资源的文件包 在js内引用以下图片 ，注意路径）