【小程序】小程序上实现刮刮乐抽奖效果，求思路？

【小程序】小程序上实现刮刮乐抽奖效果，求思路？

回答

平面上设置N个监测点
全部滑过或者 超过 多少百分比的点被滑过( 看具体策略 )
就表示已经刮开了

wxml部分:
<view class="aa" style="">

  <!--注意：同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作-->
    <canvas canvas-id="myCanvas" class="myCanvas"
        disable-scroll="false"
        bindtouchstart="touchStart"
        bindtouchmove="touchMove"
        bindtouchend="touchEnd"
        style="width:400rpx;height:200rpx;background:url('{{img}}')center ">
    </canvas>

</view>

js部分：

const ctx = wx.createCanvasContext('myCanvas')
Page({
  data: {
    img:'../../images/mylogo.jpg',
  },
  startX: 0, //保存X坐标轴变量
  startY: 0, //保存X坐标轴变量
  onReady:function() {
    ctx.setFillStyle('#EFEFEF')
    ctx.fillRect(0, 0, 240, 150.75)
    ctx.draw()    
  },
  touchStart:function(e){
    var startX1 = e.changedTouches[0].x
    var startY1 = e.changedTouches[0].y
    ctx.save();  //保存当前坐标轴的缩放、旋转、平移信息
    ctx.beginPath() //开始一个路径 
    ctx.clearRect(startX1, startY1, 10, 10);
    ctx.restore();  //恢复之前保存过的坐标轴的缩放、旋转、平移信息
  },
  touchMove:function(e){
    var startX1 = e.changedTouches[0].x
    var startY1 = e.changedTouches[0].y
    ctx.save();  //保存当前坐标轴的缩放、旋转、平移信息
    ctx.moveTo(this.startX, this.startY);  //把路径移动到画布中的指定点，但不创建线条
    ctx.clearRect(startX1, startY1,10,10);  //添加一个新点，然后在画布中创建从该点到最后指定点的线条
    ctx.restore()  //恢复之前保存过的坐标轴的缩放、旋转、平移信息
    this.startX = startX1;
    this.startY = startY1;
    //只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。context跟<canvas/>不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个<canvas/>
    wx.drawCanvas({
      canvasId: 'myCanvas',
      reserve: true,
      actions:ctx.getActions() // 获取绘图动作数组
    })
  },
})

【小程序】小程序上实现刮刮乐抽奖效果，求思路？

营销组件 pfan123/wx-market 里面包含了微信小程序刮刮乐的实现，具体的你可以看一下呢，记得star

以上是 【小程序】小程序上实现刮刮乐抽奖效果，求思路？ 的全部内容， 来源链接： utcz.com/a/78505.html

回到顶部