微信小程序刮刮卡的实现

如何实现刮刮卡的效果呢？思路是：
1、先将中奖的图片或者文字位置和大小确定2、开始画canvas，将位置和大小跟之前中奖的文案的位置保持一致。
3、在canvas上覆盖一层灰色的蒙层，作出刮刮卡未刮之前的效果具体代码如下let left=0;
this.data.awardCanvas.moveTo(left,0) this.data.awardCanvas.lineTo(left+400,0);
this.data.awardCanvas.lineTo(left+400,150);
this.data.awardCanvas.lineTo(left,150);
this.data.awardCanvas.stroke() this.data.awardCanvas.setFillStyle('
#ddd'
) this.data.awardCanvas.fill() this.data.awardCanvas.draw()4、开始做刮刮卡的动作，在canvas定义bindtouchstart和bindtouchmove两个触发的动作bindtouchstart是开始落手指的第一个位置，bindtouchmove是手指移动的位置其中重要一个canvas属性是clearRect，清除画布上的内容clearRect(清除位置的X坐标，清除位置的Y坐标,清除的宽度，清除的高度)具体代码如下：
this.data.awardCanvas.clearRect(x,y,15,15);
this.data.awardCanvas.draw(true)具体的代码在https://github.com/zhaodengping/scratch-mini快去试试吧，也许能刮到一等奖哦～～推荐教程：
《微信小程序》以上就是微信小程序刮刮卡的实现的详细内容，更多请关注php中文网其它相关文章！
微信
分享相关标签：
weixin本文转载于：
juejin，如有侵犯，请联系a@php.cn删除
上一篇：
浅析小程序运行机制
下一篇：
怎么下载微信公众号的音频相关文章相关视频小程序如何接入富文本编辑？小程序中如何管理session？小程序支付秘钥在哪里设置微信小程序怎么实现九宫格跳转浅析小程序运行机制微信小程序刮刮卡的实现认识小程序的目录结构小程序的rpx长度单位详解布局奔牛课堂小程序搜素框小程序文档 [温州做小程序]