微信小程序利用canvas 绘制幸运大转盘功能


Posted in Javascript onJuly 06, 2018

小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码

Page({
/**
 * 页面的初始数据
*/
data: {
awardsConfig: {},
restaraunts: [], //大转盘奖品信息
},
/**
 * 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var self = this;
wx.getSystemInfo({
//获取系统信息成功,将系统窗口的宽高赋给页面的宽高
success: function (res) {
self.width = res.windowWidth
self.height = res.windowHeight
}
})
self.data.awardsConfig = {
chance: true,
awards: self.data.restaraunts//存放奖项信息
}
self.tab();
})
},
tab: function() {
var self = this;
// 绘制转盘
var awardsConfig = self.data.awardsConfig.awards,
len = awardsConfig.length,
rotateDeg = 360 / len / 2 + 90,
html = [],
turnNum = 1 / len // 文字旋转 turn 值
self.setData({
btnDisabled: self.data.awardsConfig.chance ? '' : 'disabled'
})
var ctx = wx.createContext();
for (var i = 0; i < len; i++) {
var w = self.width; //页面宽
var r = w * 0.38; //圆半径 0.35w
// 保存当前状态
ctx.save();
// 开始一条新路径
ctx.beginPath();
// 位移到圆心,下面需要围绕圆心旋转
// ctx.translate(150, 150);
ctx.translate(w / 2 - 14, w / 2 - 18);
// 从(0, 0)坐标开始定义一条新的子路径
ctx.moveTo(0, 0);
// 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。
ctx.rotate((360 / len * i - rotateDeg) * Math.PI / 180);
// 绘制圆弧
ctx.arc(0, 0, r, 0, 2 * Math.PI / len, false);
// 颜色间隔
if (i % 2 == 0) {
ctx.setFillStyle('#ffffff');
} else {
ctx.setFillStyle('#ffeab0');
}
// 填充扇形
ctx.fill();
// 绘制边框
ctx.setLineWidth(0.5);
ctx.setStrokeStyle('#e4370e');
ctx.stroke();
// 恢复前一个状态
ctx.restore();
// 奖项列表
html.push({
turn: (i + 1) * turnNum + 'turn',
award: awardsConfig[i]
});
}
self.setData({
awardsList: html
});
wx.drawCanvas({
canvasId: 'canvas',
actions: ctx.getActions()
})
},
inner: function(e) {
const self = this;
if (self.data.awardsConfig.chance) {
self.data.awardsConfig.chance = false;//转动时禁止再次触发点击事件
var json = res.data;//后端自动分配奖项,并传给前端奖项信息
var item = parseInt(json.grade); //获取从1到奖品数量之间的随机数
self.getLottery(item + 1, self.data.restaraunts[item]); //奖项位置 (+1 是为了转动的时候计算角度),对应奖项
}
},
getLottery: function(item, txt) {
var self = this
var awardsConfig = self.data.awardsConfig.awards,
len = awardsConfig.length;
var awardIndex = item;
// 获取奖品配置
var awardsConfig = self.data.awardsConfig
if (awardIndex < 2) awardsConfig.chance = false
// 初始化 rotate
var animationInit = wx.createAnimation({
duration: 1
})
this.animationInit = animationInit;
animationInit.rotate(0).step()
this.setData({
animationData: animationInit.export(),
btnDisabled: 'disabled'
})
// 旋转抽奖 执行动画效果
setTimeout(function () {
var animationRun = wx.createAnimation({
duration: 4000,
timingFunction: 'ease'
})
self.animationRun = animationRun
animationRun.rotate(0 - (360 * 8 - awardIndex * (360 / len))).step()
self.setData({
animationData: animationRun.export()
})
}, 100)
// 记录奖品
var winAwards = wx.getStorageSync('winAwards') || {
data: []
}
var textInfo = txt === "谢谢参与" ? txt : txt + '1个';
winAwards.data.push(textInfo)
wx.setStorageSync('winAwards', winAwards)
var jh = parseInt(self.data.jh) - 1;
// 中奖提示
setTimeout(function () {
if (txt === "谢谢参与") {
wx.showModal({
title: '很遗憾',
content: '祝您好运',
showCancel: false
})
} else {
wx.showModal({
title: '恭喜',
content: '获得' + txt,
showCancel: false
})
}
self.data.awardsConfig.chance = true;
if (awardsConfig.chance) {
self.setData({
btnDisabled: ''
})
}
}, 4100);
},
function(err) {
console.log(err)
console.log("err")
//error
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
// this.drawTurntable(this, new Date());
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})

小程序 canvas 层级永远在最上级,如果想要设置在canvas上面 就需要用到web-view 或者 web-image 这样就能居于canvas 上层了 ,具体可以去查看下小程序的api 搜索web-view 这里就不多解释啦,如有错误之处,还希望各位不吝赐教

总结

以上所述是小编给大家介绍的微信小程序利用canvas 绘制幸运大转盘功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
Mac下安装vue
Apr 11 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 Javascript
用Node提供静态文件服务的方法
Jul 06 #Javascript
vue使用监听实现全选反选功能
Jul 06 #Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 #Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 #Javascript
javascript显示动态时间的方法汇总
Jul 06 #Javascript
Django+Vue跨域环境配置详解
Jul 06 #Javascript
微信小程序画布圆形进度条显示效果
Nov 17 #Javascript
You might like
第十四节 命名空间 [14]
2006/10/09 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
PHP基础学习小结
2011/04/17 PHP
php强制下载文件函数
2016/08/24 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
再探JavaScript作用域
2014/09/24 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
使用Python开发windows GUI程序入门实例
2014/10/23 Python
Python温度转换实例分析
2018/01/17 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
工程师岗位职责
2013/11/08 职场文书
专业销售业务员求职信
2013/11/18 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
小学生运动会报道稿
2014/09/12 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
MySQL一些常用高级SQL语句
2021/07/03 MySQL