小潘杂谈

微信小程序刮刮卡的实现

字号+ 作者:admin 来源:seo博客 2020-09-08 15:30 我要评论( )

如何实现刮刮卡的效果呢? 思路是: 1、先将中奖的图片或者文字位置和大小确定 2、开始画canvas,将位置和大小跟之前中奖的文案的位置保持一致。 3、在canvas上覆......

微信小程序刮刮卡的实现

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

思路是:

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

快去试试吧,也许能刮到一等奖哦~~

推荐教程:《微信小程序》以上就是微信小程序刮刮卡的实现的详细内容,更多请关注小潘博客其它相关文章!

转载请注明出处。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。转载请注明seohttp://www.hkxiaopan.com

网友点评
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
验证码: 点击我更换图片
精彩导读