微信小程序刮刮卡效果

<canvas canvas-id="canvas" bindtouchmove="onTouchMove" />

data: {canvasWidth: 310,canvasHeight: 136,
},
async onReady() {const canvas = wx.createCanvasContext('canvas')// 图片路径换成本地的格式const { path } = await wx.getImageInfo({ src: url })// 将画布背景覆盖在盒子上面canvas.drawImage(path, 0, 0, canvasWidth, canvasHeight)wx.drawCanvas({ canvasId: 'canvas',reserve: true,actions: canvas.getActions()})
},
onTouchMove(e) {const startX = e.changedTouches[0].x;const startY = e.changedTouches[0].y;// 刮卡轨迹canvas.moveTo(startX, startY);// 刮卡效果canvas.clearRect(startX, startY, 20, 20)this.data.area += 80;if(this.data.area > canvasWidth*canvasHeight*0.4) {this.setData({ shouldShowPrize: true })};wx.drawImage({canvasId: 'canvas',reserve: true,actions: canvas.getActions(),})
}

wx.drawImage(): 微信 API 绘图-绘制画布

微信小程序刮刮卡效果相关推荐

微信小程序实现打卡功能
参考链接: (1)微信小程序实现签到弹窗动画 https://www.jb51.net/article/196080.htm (2)微信小程序开发(四)入门之打卡功能开发 https://blog.c ...
微信小程序轮播图中间变大_微信小程序实现带放大效果的轮播图
本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下效果如图 WXML WXSS .Carousel{ margin-top: 49px; background-color ...
微信小程序拍照打卡功能实现
微信小程序拍照打卡功能实现附Java代码小程序端签到页面wxml 签到页面js 拍照页面wxml 拍照页面js Java后台保存照片保存打卡数据由于拍照组件是相当于一个块,用隐藏显示的方 ...
微信小程序实现城市选择效果(超详细)
直接进入正题首先在项目中同级创建一个components文件夹,在文件夹下创建region-picker文件夹,在该文件夹点击右键新建Component就会创建名为 region-picker.js ...
微信小程序scroll-view滑动卡顿，下滑时向上滑动失效
微信小程序scroll-view滑动卡顿滑动卡顿解决方案代码实现 wxml文件 js文件滑动卡顿微信小程序scroll-view组件在滑动时频繁卡顿,向下滑动时,向上滑动无效,无法停止.小程 ...
php文字左右滚动通告,微信小程序左右滚动公告栏效果代码实例
这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 {{notice}} x data: ...
微信小程序心形点赞效果
微信小程序心形点赞效果前言准备实现原理布局样式逻辑实现尾巴前言之前写过一篇文章微信小程序Canvas绘图API,简单介绍了下微信小程序(下面统称小程序)Canvas绘图相关API的 ...
[精品毕设]微信小程序班级打卡系统+后台管理系统|前后分离VUE
目录 1.项目功能介绍 2.项目资料截图 3.项目运行截图 4.项目资料获取 1.项目功能介绍 <微信小程序班级打卡系统+后台管理系统|前后分离VUE>该项目含有源码.论文等资料.配套开发 ...
微信小程序实现点赞气泡效果
微信小程序实现点赞气泡效果先上代码: <view class="listImg"><block wx:for="{{8}}" wx:key= ...
ar 微信小程序_微信小程序可以实现AR效果了
微信小程序可以实现AR效果了金羊网作者:马化展 2019-07-08 金羊网讯记者马化展报道:7月5日,微信宣布微信小程序可实现AR效果了.同日,首个小程序AR动态试妆的美妆品牌小程序正式落 ...

微信小程序刮刮卡效果

微信小程序刮刮卡效果相关推荐

最新文章

热门文章

微信小程序 刮刮卡效果

微信小程序 刮刮卡效果相关推荐

最新文章

热门文章

微信小程序刮刮卡效果

微信小程序刮刮卡效果相关推荐