如果要在网页 h5 上实现刮刮乐效果，其实很多人都知道原理非常简单，用一个 canvas 盖在结果内容上层，然后给 canvas 绑定 ontouchmove 事件，触发后使用 context.clearRect(x, y, width, height);清除 canvas 上的点击位置中 x, y 位置的一个 10px * 10px 矩形即可实现刮刮乐效果。但如果在小程序呢？
在小程序中实现刮刮乐效果
在小程序中实现刮刮乐的原理也是相似，但由于 API 的差异，写法有所不同。这里以微信小程序 CanvasContext API，使用 wepy 作为开发框架为例（当然使用微信小程序新版 Canvas API 也可以，更像 h5 中使用 canvas）：
<style lang="less">
.ggl {
width: 394rpx;
height: 110rpx;
&__content {
width: 394rpx;
height: 110rpx;
position: relative;
image {
width: 100%;
height: 100%;
}
}
.canvas {
position: absolute;
top: 10rpx;
left: 9rpx;
width: 374rpx !important;
height: 92rpx !important;
}
}
</style>
<template>
<view class="ggl">
<view class="ggl__content">
<image src="../images/ggl/my-result.png" /><!--这里是结果显示的内容，下面的 canvas 会盖住结果-->
</view>
<canvas class="canvas" style="width: {{width}}px; height: {{height}}px;" canvas-id="canvas" @touchmove="touchMove" />
</view>
</template>
<script>
import wepy from 'wepy'
export default class Ggl extends wepy.page {
config = {
navigationBarTitleText: '刮刮乐'
}
data = {
gglCoverImgUrl: '../images/ggl/my-cover.png', // 刮刮乐长什么样子，由这图片定
context: wepy.createCanvasContext('canvas'),
scale: 750 / wepy.getSystemInfoSync().windowWidth, // 注意：canvas 设置的 px 单位转 rpx 单位时，需要用到比例
width: 374,
height: 92
}
computed = {}
methods = {
touchMove (e) {
if (e && e.touches[0]) {
const p = e.touches[0]
const { context } = this
context.clearRect(p.x - 5, p.y - 5, 10, 10) // 关键代码：每次清一个方块，实现刮刮乐效果
context.draw(true) // 关键代码：这里使用 true 参数意思是保存上一次对画布的操作，如果是 false 画布会被清空哦
}
}
}
events = {}
onLoad (option) {
this.initCanvas()
}
initCanvas () { // 先在 canvas 上画上马赛克图片
const { scale, context, width, height, gglCoverImgUrl } = this
const realWidth = width / scale // 注意 px -> rpx 需要按比例换算
const realHeight = height / scale // 注意 px -> rpx 需要按比例换算
context.drawImage(gglCoverImgUrl, 0, 0, realWidth, realHeight)
context.draw()
}
}
</script>
