mpvue小程序营销活动——canvas实现刮刮卡

 

一、效果图

二、说明

1.使用mpVue编写小程序刮刮奖，底部的优惠券信息可以随时变化

2.如果有需要刮奖涂层可以是一个图片，也可以是纯色背景，依据coating变量是否为空来控制选项。

3.如果刮奖涂层是一个图片，在绘制的时候需要注意网络图片不能直接绘制，需要缓存到本地（wx.downloadfile），用本地地址进行绘制，wx.download花费时间，会导致优惠券内容先显示出来，然后涂层才覆盖其上，用couponShow变量（boolean）来控制整个内容显隐，只有当wx.download结束后内容才出现。

4.获取canvas的宽高，利用了以下方式：

wx.createSelectorQuery().select('#scratchCanvas').boundingClientRect(function (rect) {
  this.width = parseInt(res.width)//  获取canvas宽度；
  this.height = parseInt(res.height)//  获取canvas高度
})

 

 初始化全局变量有两种方法：

方法一：在data中定义，在onLoad中初始化

方法二： 在constructor方法中初始，简单明了

参考文章：https://blog.csdn.net/m0_38082783/article/details/79458895