⼤转盘抽奖⼩程序版转盘抽奖⽹页版
今天整理了下以前写的⼩demo，把⼤转盘抽奖的代码，整合下，列了⽹页版和⼩程序两个版本，这个转盘抽奖的核⼼是H5的canvas和Css3的translate属性，⾮常简单，写了⽹页版和⼩程序版供⼤家参考，主要核⼼代码就是利⽤canvas画图，完整代码见，下载可⽤
希望给⼤家带来帮助
//转盘内部绘制
CanvasI=function(){
let itemsArc=360/this.itemsNum //获取⼤转盘每等分的⾓度
this.itemsArc=itemsArc
let widthI=canvasI.width
let heightI=canvasI.height
this.w1=parseInt(widthI/2)
this.h1=parseInt(heightI/2)
this.Items(itemsArc)//每⼀份扇形的内部绘制
}
//绘制奖品名称
lottery.prototype.Items=function(e){
let that=this
let itemsArc=e//每⼀分扇形的⾓度
let Num=that.itemsNum// 等分数量
let // 放⽂字的数组
for(let i=0;i<Num;i++){
ctx.beginPath()
ctx.arc(that.w1,that.h1,that.w1-5,itemsArc * i * Math.PI / 180, (itemsArc + itemsArc * i) * Math.PI / 180)//绘制扇形，注意下⼀个扇形⽐上⼀个扇形多⼀个itemsArc的⾓度
ctx.closePath()
if (i % 2 == 0) {//绘制偶数扇形和奇数扇形的颜⾊不同
ctx.lor[0]
} else {
ctx.lor[1]
}
ctx.fill()
ctx.save()
ctx.beginPath()
ctx.fontSize=12
ctx.fillStyle='#000'
}
}
//跑马灯绘制
lottery.prototype.light=function(){
var that=this
var itemsNum=that.itemsNum
that.lamp++
if(that.lamp>=2){简单网页
that.lamp=0
}
ctx2.beginPath()
ctx2.arc(that.w2,that.h2,that.w2,0,2*Math.PI)//绘制底⾊为红⾊的圆形
ctx2.fillStyle="#FA7471";
ctx2.fill()
for(let i=0;i<that.itemsNum*2;i++){//跑马灯⼩圆圈⽐⼤圆盘等分数量多⼀倍
ctx2.save()
ctx2.beginPath()
ctx2.arc(0,that.h2-10,5,0,2*Math.PI)//圆形跑马灯⼩圆圈
//跑马灯第⼀次闪烁时与第⼆次闪烁时绘制相反的颜⾊，再配上定时器循环闪烁就可以达到跑马灯⼀闪⼀闪的效果了
if(that.lamp==0){//第⼀次闪烁时偶数奇数的跑马灯各绘制⼀种颜⾊
if(i%2==0){
ctx2.fillStyle="#FBF1A9";
} else {
ctx2.fillStyle="#fbb936";
}
}else {//第⼆次闪烁时偶数奇数的跑马灯颜⾊对调
if (i % 2 == 0) {
ctx2.fillStyle="#fbb936";
} else {
ctx2.fillStyle="#FBF1A9";
}
}
ctx2.fill()
}
}
⼩程序的代码⽰例
//事件处理函数
onLoad: function (e) {
let that=this
let itemsArc=360/that.data.itemsNum //获取⼤转盘每等分的⾓度
that.setData({
itemsArc
},function () {
w1=parseInt(rect.width/2)
h1=parseInt(rect.height/2)
that.Items(itemsArc)//每⼀份扇形的内部绘制
}).exec()
mytime=setInterval(that.light,1000)//启动跑马灯定时器
})
},
onReady:function () {
var that=this
w2=parseInt(rect.width/2)
h2=parseInt(rect.height/2)
that.light()
}).exec()
},
light(){//跑马灯绘制
let that=this
let itemsNum=that.data.itemsNum
lamp++
if(lamp>=2){
lamp=0
}
ctx2.beginPath()
ctx2.arc(w2,h2,w2,0,2*Math.PI)//绘制底⾊为红⾊的圆形
ctx2.setFillStyle("#FA7471")
ctx2.fill()
for(let i=0;i<itemsNum*2;i++){//跑马灯⼩圆圈⽐⼤圆盘等分数量多⼀倍
ctx2.save()
ctx2.beginPath()
ctx2.arc(0,w2-10,5,0,2*Math.PI)//绘制圆形跑马灯⼩圆圈
/
/跑马灯第⼀次闪烁时与第⼆次闪烁时绘制相反的颜⾊，再配上定时器循环闪烁就可以达到跑马灯⼀闪⼀闪的效果了
if(lamp==0){//第⼀次闪烁时偶数奇数的跑马灯各绘制⼀种颜⾊
if(i%2==0){
ctx2.setFillStyle("#FBF1A9");
} else {
ctx2.setFillStyle("#fbb936");
}
}else {//第⼆次闪烁时偶数奇数的跑马灯颜⾊对调
if (i % 2 == 0) {
ctx2.setFillStyle("#fbb936");
} else {
ctx2.setFillStyle("#FBF1A9");
}
}
ctx2.fill()
}
ctx2.draw()
},
Items(e){
let that=this
let itemsArc=e//每⼀分扇形的⾓度
let Num=that.data.itemsNum// 等分数量
let text=// 放⽂字的数组
for(let i=0;i<Num;i++){
ctx.beginPath()
ctx.arc(w1,h1,w1-5,itemsArc * i * Math.PI / 180, (itemsArc + itemsArc * i) * Math.PI / 180)//绘制扇形，注意下⼀个扇形⽐上⼀个扇形多⼀个itemsArc的⾓度
ctx.closePath()
if (i % 2 == 0) {//绘制偶数扇形和奇数扇形的颜⾊不同
ctx.setFillStyle(lor[0])
} else {
ctx.setFillStyle(lor[1])
}
ctx.fill()
ctx.save()
ctx.beginPath()
ctx.setFontSize(12)
ctx.setFillStyle('#000')
ctx.setTextAlign('center')
ctx.setTextBaseline('middle')
}
// that.Images();
ctx.draw(true);//参数为true的时候，保存当前画布的内容，继续绘制
},
效果图如下
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。