微信刮刮卡php,微信小程序刮刮卡的实现

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

思路是：

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,微信小程序刮刮卡的实现相关推荐

公司打卡签到活动小程序，打卡更轻松，管理更便捷JavaScript 错误 - throw、try 和 catch
<script> var txt=""; function message(){try {adddlert("Welcome guest!");}c ...
微信小程序拍照打卡功能实现
微信小程序拍照打卡功能实现附Java代码小程序端签到页面wxml 签到页面js 拍照页面wxml 拍照页面js Java后台保存照片保存打卡数据由于拍照组件是相当于一个块,用隐藏显示的方 ...
（已更新）最新打卡抽奖助手小程序源码，带微信通知功能，去授权
源码已经测试,去除授权安装即可运营,微擎后端 1.首先安装微擎模块,上传服务器这个大家都知道,就不用过多解释了 2.配置推荐 (服务器最低配置1h2g,域名需要备案且还需要设置ssl证书) Nig ...
微信小程序scroll-view滑动卡顿，下滑时向上滑动失效
微信小程序scroll-view滑动卡顿滑动卡顿解决方案代码实现 wxml文件 js文件滑动卡顿微信小程序scroll-view组件在滑动时频繁卡顿,向下滑动时,向上滑动无效,无法停止.小程 ...
微信小程序实现打卡功能
参考链接: (1)微信小程序实现签到弹窗动画 https://www.jb51.net/article/196080.htm (2)微信小程序开发(四)入门之打卡功能开发 https://blog.c ...
最新款打卡抽奖助手小程序源码，带微信通知功能，去授权
源码已经测试,去除授权安装即可运营,微擎后端 1.首先安装微擎模块,上传服务器这个大家都知道,就不用过多解释了 2.配置推荐 (服务器最低配置1h2g,域名需要备案且还需要设置ssl证书) Nig ...
[精品毕设]微信小程序班级打卡系统+后台管理系统|前后分离VUE
目录 1.项目功能介绍 2.项目资料截图 3.项目运行截图 4.项目资料获取 1.项目功能介绍 <微信小程序班级打卡系统+后台管理系统|前后分离VUE>该项目含有源码.论文等资料.配套开发 ...
eleme，Table 表格，微信计次卡消费小程序，次卡功能，美容院微信会员卡系统
<template><el-table:data="tableData"style="width: 100%"><el-table ...
如何做一个基于微信小程序的打卡签到
要做一个基于微信小程序的打卡签到系统,可以按照以下步骤进行: 创建小程序:在微信公众平台上注册小程序账号,创建一个新的小程序. 设计打卡签到功能:根据需求,设计打卡签到的功能模块,包括签到按钮.签到时 ...
微信小程序实现集卡合成动画
微信小程序实现集卡合成动画效果图微信小程序动画搭建结构样式 js 效果图微信小程序动画创建一个动画实例 animation 调用实例的方法来描述动画最后通过动画实例的 export ...

微信刮刮卡php,微信小程序刮刮卡的实现

微信刮刮卡php,微信小程序刮刮卡的实现相关推荐

最新文章

热门文章