hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 小程序 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

微信小程序刮刮卡的完成_微信小程序

2020-05-24小程序ki4网10°c
A+ A-

怎样完成刮刮卡的结果呢?

思绪是:

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

快去尝尝吧,或许能刮到一等奖哦~~

引荐教程:《微信小程序》

以上就是微信小程序刮刮卡的完成的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
微信小程序刮刮卡的完成_微信小程序

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>