完整~小程序canvas制作幸运抽奖转盘

小程序转盘完整版

最近在做一款小程序幸运转盘抽奖，遇到了不少坑，分享一下
先看下效果图

wxml里面比较简单，但是canvas在真机上面显示会有问题，只需要生成你想要的canvas后转化为图片

<view class="turn-table"><image class="bg-turntable" src='{{turntableImage}}'  mode="widthFix"></image><view><view class='canvas-container'><canvas style="position:fixed;left: -10000rpx;" disable-scroll="true" canvas-id='canvas' id="canvas-bg" class='canvas '></canvas><image src='{{tempFilePath}}' style="-webkit-transform:rotate({{isRotate}}deg);transform:rotate({{isRotate}}deg);display: block;"  class='canvasI-image'></image></view></view><view class="center-bg"><image class='start' src="../../../images/turntable/start.png" catchtap='{{trunBtn?"getStart":""}}'  mode="widthFix" /></view></view>

wxss

.contaner{width: 100%;padding-bottom: 28rpx;
}
.bg-image{position: absolute;top: 0rpx;width: 100%;
}
.turn-table{margin: 0 auto;min-height: 574rpx;height: auto;margin-top: 442rpx;margin-bottom: 13rpx;position: relative;
}
.canvas{width: 600rpx;height: 600rpx;display: block;position: absolute;left: 0;right: 0;margin: auto auto;-webkit-transition:all 3s ease;/* Firefox 4 */-moz-transition:all 3s ease;/* Opera */-o-transition:all 3s ease;transition:all 3s ease;
}
.canvas-image{width: 556rpx;height: 556rpx;display: block;position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: 10;margin: auto auto;-webkit-transition:all 3s ease;/* Firefox 4 */-moz-transition:all 3s ease;/* Opera */-o-transition:all 3s ease;transition:all 3s ease;
}
.canvas-container{width: 600rpx;height: 600rpx;margin: 0 auto;
}
.bg-turntable{display: block;width: 648rpx;position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: 10;margin: auto auto;
}
.center-bg{position: absolute;width: 240rpx;height: 240rpx;z-index: 999;background: #fbd56d;top: 0;bottom: 0;left: 0;right: 0;margin: auto auto;border-radius: 50%;
}
.start{position: absolute;width: 196rpx;height: 246rpx;left:22rpx;bottom: 22rpx;z-index: 999;margin: auto auto;
}

js部分

const app = getApp()
const ctx = wx.createCanvasContext("canvas", this); //创建id为canvas的绘图
var w1 = '';
var h1 = '';
Page({/*** 页面的初始数据*/data: {turntableRegionId:0,trunBtn:true,//抽奖按钮是否可以点击itemsNum: 6, //大转盘等分数,可根据后台配置加载itemsArc: 0, //大转盘每等分角度coupons:[],//每个扇形中的文字填充isRotate: 0,turntableImage:'../../../images/turntable/timg.jpg'},handleChoujiang(){//调用抽奖接口，返回是否中奖字段，以及中奖区域let That = this;let turntableRegionId = 2 //本地暂且固定中奖区域2That.setData({isRotate:That.data.isRotate-That.data.isRotate%360 + (720 -Number(turntableRegionId-1)*That.data.itemsArc-0.5*That.data.itemsArc-90),turntableRegionId:turntableRegionId})That.handleStart(turntableRegionId)},handleStart(turntableRegionId) { let that = this;// 指定获奖结果let n = that.data.isRotate; //传入指定区域生成的旋转角度n = n  + 1440; //1440为旋转基数，最低要旋转1440度，即4圈。rand-(rand%60) 这个是让指针永远停在扇形中心的算法。n + 是为了重复点击的时候有足够的旋转角度。that.setData({isRotate: n,trunBtn:true})setTimeout(function(){if(turntableRegionId>0){//弹窗中奖了提示}else{//弹窗未中奖}},3000)},getGiftList(){let That = this;for (let i = 0; i < That.data.itemsNum; i++) {That.data.coupons.push({validateStatus:2,turntableRegionId:i+1,mainInfo:(i+1)+'等奖'})              }  let itemsArc = 360 / That.data.itemsNum;That.setData({coupons:That.data.coupons})That.setData({itemsArc}, function () {wx.createSelectorQuery().select('#canvas-bg').boundingClientRect(function (rect) {w1 = parseInt(rect.width / 2);h1 = parseInt(rect.height / 2);That.drawRegion(itemsArc);//每一份扇形的内部绘制。}).exec()})},drawRegion(e) {let that = this;let itemsArc = e;//每一份扇形的角度let num = that.data.itemsNum;//等分数量let itemArr = that.data.coupons;//放文字的数组for (let i = 0; i < num; i++) {ctx.beginPath();ctx.moveTo(w1, h1);ctx.arc(w1, h1, w1 - 2, itemsArc * i * Math.PI / 180, (itemsArc + itemsArc * i) * Math.PI / 180);//绘制扇形，默认从第四象限开始画，所以区域编号1的地方为三点钟开始位置ctx.closePath();const colorList = ['#01a1dd','#fffdec','#fe5921','#fffdec','#fccc00','#fffdec']ctx.setFillStyle(colorList[i%6]);ctx.fill();ctx.save();ctx.beginPath();ctx.translate(w1, h1);//将原点移至圆形圆心位置ctx.rotate((itemsArc * (i + 1+(num-2)*0.25)) * Math.PI / 180);//旋转文字if(num>=6){ctx.setFontSize(18);//设置文字字号大小}else{ctx.setFontSize(20);//设置文字字号大小}if(i%2==0){ctx.setFillStyle("#ffffff");//设置文字颜色}else{ctx.setFillStyle("#ff484c");//设置文字颜色}ctx.setTextAlign("center");//使文字垂直居中显示ctx.setTextBaseline("middle");//使文字水平居中显示if(itemArr[i].validateStatus=='5'){ctx.fillText('谢谢', 0, -(h1 * 0.80));ctx.setFontSize(18);//设置文字字号大小ctx.fillText('参与', 0,-(h1 * 0.65) );}else{if(itemArr[i].mainInfo.length<7){ctx.setFontSize(18);//设置文字字号大小ctx.fillText(itemArr[i].mainInfo, 0, -(h1 * 0.75));}else if(itemArr[i].mainInfo.length>=7&&itemArr[i].mainInfo.length<=10){let len = Math.ceil(itemArr[i].mainInfo.length/2)ctx.fillText(itemArr[i].mainInfo.slice(0,len), 0, -(h1 * 0.80));ctx.fillText(itemArr[i].mainInfo.slice(len), 0, -(h1 * 0.65));ctx.setFontSize(28);//设置文字字号大小}else{let mainInfo = itemArr[i].mainInfo.slice(0,10)+'...'ctx.fillText(mainInfo.slice(0,6), 0, -(h1 * 0.80));ctx.fillText(mainInfo.slice(6,13), 0, -(h1 * 0.65));ctx.setFontSize(28);//设置文字字号大小}} ctx.restore();//保存绘图上下文，使上一个绘制的扇形保存住。}ctx.draw();setTimeout(function(){wx.canvasToTempFilePath({x: 0,y: 0,width: 2*w1,height: 2*h1,destWidth: 8*w1,destHeight: 8*h1,canvasId: 'canvas',success: function (res) {var tempFilePath = res.tempFilePath;that.setData({tempFilePath:res.tempFilePath})console.log(tempFilePath)},fail:function(res){console.log('----------  ', res)}})},300);ctx.draw(true);//参数为true的时候，保存当前画布的内容，继续绘制},/*** 生命周期函数--监听页面加载*/onLoad: function (option) {},onShow(){},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {var that = this;this.getGiftList()},})

由于固定了中奖区域为2，所以每次指针转到的地方为二等奖~~~

完整~小程序canvas制作幸运抽奖转盘相关推荐

html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
今天吃什么转盘小程序开发制作功能介绍
帮你决定今天吃什么转盘小程序,还能领外卖优惠券,外卖红包!选择困难者的福音. 吃什么呢?今天吃什么?我是吃什么小助手,到饭点了不知道吃什么,就来看看大家今天吃什么小程序. 今天吃什么转盘小程序开发制作 ...
Andriod小程序——简单制作游戏中控制任务移动的轮盘
Andriod小程序--简单制作游戏中控制人物移动的轮盘说明自定义自己的view继承于View类重写onDraw()方法当我们看到这个控件的时候那个样子,如图完善onDraw()方法重写O ...
uni保存canvas图片_小程序canvas【开箱即用】
前言小程序canvas有多坑,相信开发过的同学们都深有体会每一次写使用canvas都忍不住骂两句鉴于此,小弟就从0开始,一步一步实现画图功能,并且列明所有我遇到的坑注意:本文都是基于uni开发 ...
html制作炸金花,如何在微信小程序上制作炸金花？
今天小编就带大家来共同学习如何在微信小程序上制作炸金花?希望可以帮助到有需要的小伙伴哦,下面就是详细完整的操作步骤. app.json: { "pages":[ "pag ...
小程序Canvas绘制图片太大，自动闪退，安卓会有crash问题
2019独角兽企业重金招聘Python工程师标准>>> 问题说明: 目前小程序Canvas版本还有不少bug,性能较低. 对于图片太大使用ctx.drawImage(imgpath, ...
Scratch之制作幸运抽奖机
生活中许多问题的解决需要使用到随机数,比如抽奖,为了公平,必须是随机抽取.Scratch软件的"运算"指令组提供了一个可以产生随机数的指令.本篇文章通过制作"幸运抽奖机& ...
html制作炸金花,微信小程序怎么制作炸金花?微信小程序制作炸金花的方法
很多朋友喜欢玩炸金花游戏,那么怎么在微信小程序上制作炸金花呢?下面就是小编带来的完整详细的教程,想要学习的小伙伴就赶紧看过来吧. 微信小程序怎么制作炸金花?微信小程序制作炸金花的方法 app.json ...
人才招聘微信小程序开发制作功能介绍
人才招聘微信小程序开发制作功能介绍功能详情: 1.展示职位列表 2.展示简历列表 3.企业会员中心 4.个人会员中心展示 5.首页推荐企业广告位展示 6.职位详情展示人才招聘微信小程序企业入驻及 ...

完整~小程序canvas制作幸运抽奖转盘

小程序转盘完整版

完整~小程序canvas制作幸运抽奖转盘相关推荐

最新文章

热门文章