微信小程序中实现刮刮卡的示例

　　介绍

小编给大家分享一下微信小程序中实现刮刮卡的示例,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

如何实现刮刮卡的效果呢?

思路是:

1,先将中奖的图片或者文字位置和大小确定

2,开始画画布,将位置和大小跟之前中奖的文案的位置保持一致。

3,在画布上覆盖一层灰色的蒙层,作出刮刮卡未刮之前的效果

具体代码如下

let 左=0; 　　this.data.awardCanvas.moveTo(左,0) 　　this.data.awardCanvas.lineTo(左+ 400,0); 　　this.data.awardCanvas.lineTo(左+ 400150); 　　this.data.awardCanvas.lineTo(左,150); 　　this.data.awardCanvas.stroke () 　　this.data.awardCanvas.setFillStyle (& # 39; # ddd # 39;) 　　this.data.awardCanvas.fill () 　　this.data.awardCanvas.draw ()

4,开始做刮刮卡的动作,在画布上定义bindtouchstart和bindtouchmove两个触发的动作

bindtouchstart是开始落手指的第一个位置,bindtouchmove是手指移动的位置

其中重要一个画布属性是clearRect,清除画布上的内容

clearRect(清除位置的X坐标,清除位置的Y坐标,清除的宽度,清除的高度)

具体代码如下:

this.data.awardCanvas.clearRect (X, Y, 15日,15); 　　this.data.awardCanvas.draw(真正的)

看完了这篇文章,相信你对“微信小程序中实现刮刮卡的示例”有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!

微信小程序中实现刮刮卡的示例