今天整理了之前写的小演示，整合了大转盘抽奖的代码，列出了两个版本：网页版和小程序。这个转盘抽奖的核心是H5画布和Cs3的翻译属性，非常简单。我写了网页版和小程序版供大家参考。主要核心代码是用画布画图。完整代码见大转盘抽奖，下载使用。

我希望能给大家带来帮助

//抽奖. prototype . getcanvasi=function(){ let item arc=360/this . item Nam//获取角度this。item arc=item arc let width I=can vasi。widthlet heighti=canvasi。height This . w1=parsent(width I/2)This . h1=parsent(height I/2)This。Items(itemsArc)//绘制这个。mytime=setinterval(这。light.bind (this)，1000)}//抽取奖品名称抽奖。原型。items=function(e){ let that=this let items arc=e//每个扇形的角度let num=that。item Nam//等于数字let text=that.text//将单词数组放为(let I=0；iNumI){ CTX . BeginPath(). CTX . move to(that . w1，that.h1) ctx.arc(that.w1，that.h1，that.w1-5，itemsArc * i * Math。PI/180，(item arc item arc * I)* math . PI/180)//画一个扇形，注意角度ctx.closePath() if (i% 2==0) {//画不同颜色ctx的偶数扇区和奇数扇区。fillstyle=那个。color [0]} else {CTX。fillstyle=那个。color[1]} CTX . fill()CTX . save()CTX . begin path()CTX . font size=12 CTX . fillstyle=' # 000 ' CTX . textalign=' center ' CTX . text baseline=' middle ' CTX . translate(that . w1，that . h1)；//将原点移到CTX。旋转((item arc *(I2))*数学。pi/180)；//旋转文字，从I ^ 2开始，因为扇形从数学意义上的第四象限中的第一个开始，而文字的当前位置正好在圆心的上方，所以开始位置要旋转两个扇形，使其与第一个扇形的位置一致。ctx.fillText(that.text[i]，0，-(that . h1 * 0.8))；CTX . restore()；//保存绘图上下文，以便保存最后绘制的扇区。} }//抽奖。prototype.light=function () {var那=this var items num=that . items num . lamp if(that . lamp=2){ that . lamp=0 } CTX 2 . begin path()CTX 2 . arc(that.w2，that.h2，that . w2，0，2 * math . pi)//绘制一个红色背景的圆形ctx2.fillStyle=' # FA7471ctx2.fill() for(让I=0；ithat . item num * 2；I ){//跑马灯的小圆圈数是大盘的两倍。CTX 2 . save()CTX 2 . begin path()CTX 2 . translate(that . w2，that . H2)CTX 2 . rotate(30 * I * math.pi/180)CTX 2 . arc(0，2*Math。PI)//圆形跑马灯的小圆圈//跑马灯第一次和第二次闪烁时画出相反的颜色，如果(that.lamp==0){//偶数和奇数跑马灯画一个颜色如果(I % 2==0){ CT } else { CTX 2 . fillstyle=' # fbb 936 '；} }else {//如果(I% 2==0) {ctx2，偶数和奇数跑马灯颜色颠倒。fillstyle=' # fbb936} else { CTX 2 . FillStyle=' # FBF1A 9 '；}} ctx2.fill() ctx2.restore()//还原之前保存的上下文，保存所有循环的tickers。没有这句话，每次一个跑马灯循环出来，以前的跑马灯绘图将被覆盖。}}小程序的代码示例

//事件处理程序onload : function(e){ let that=this let item AC=360/that . data . item Nam//获取angle that . setdata({ item arc }，function(){ wx . createselectorquery()。选择(' #canvas-one ')。boundingClientRect(函数(rect){ w1=parsent(rect . width/2)h1=parsent(rect . height/2)That。Items(itemsArc)//每个扇区的内部图})。exec()my time=set interval(that . light，1000)//启动跑马灯计时器})，onread : function(){ var that=this wx . createselectorquery()。选择(' #canvas-bg ')。boundingClientRect(函数(rect) {//监视器画布的宽度和高度w2=par sent(rect。width/2)H2=parsent(rect。高度/2)那个。light ()})。exec ()}，light(){//ticker绘制let=this let items num=that . data . items num lamp if(lamp=2){ lamp=0 } CTX 2 . begin path()CTX 2 . arc(w2，H2，w2，0，2*Math。PI)//画一个圆ctx2。setfillstyle ('# fa7471') ctx2。fill()为(设I=0；iitemsNum * 2；I ){//跑马灯的小圆圈数是大盘的两倍。CTX 2 . save()CTX 2 . begin path()CTX 2 . translate(w2，H2)CTX 2 . rotate(30 * I * math.pi/180)CTX 2 . arc(0，w2-10，2*Math。PI)//画一个圆形跑马灯的小圆圈//当跑马灯第一次和第二次闪烁时，画出相反的颜色，然后匹配定时器周期，就可以达到跑马灯闪烁的效果。if(lamp==0){//在第一次闪烁if (I% 2==0)时为偶数和奇数的tickers绘制颜色{ctx2。} else { CTX 2 . setfillstyle(' # fbb 936 ')；} }else {//第二次闪烁时，如果(I% 2==0) {ctx2，偶数和奇数跑马灯颜色会反转。setfillstyle(' # fbb 936 ')；} else { CTX 2 . setfillstyle(' # fbf1a 9 ')；}} ctx2.fill() ctx2.restore()//还原之前保存的上下文，保存所有循环的tickers。如果没有这句话，当一个跑马灯循环退出时，上一个跑马灯的图形将被覆盖。} ctx2。draw ()}，items(e){ let that=this let item arc=e//每个扇区的角度let Num=that . data . item Num///等个数let text=that.data.text//放字iNumI){ CTX . begin path()CTX . move to(w1，h1) CTX.arc (w1，h1，w1-5，item arc * I * math.pi/180,(item arc item arc * I)* math . pi/180)//画一个扇形注意角度ctx.closePath() if (i% 2==0) {//画不同颜色的偶数扇区和奇数扇区CTX。setfillstyle(即。data . color[0])} else { CTX . setfillstyle(that . data . color[1])} CTX . fill()CTX . save()CTX . begin path()CTX . setfontsize(12)CTX . setfillstyle(' 000 ')CTX . settellign(' center ')CTX . setextbaseline(' middle ')CTX . translate(w1，h1)；//将原点移到CTX。旋转((item arc *(I2))*数学。pi/180)；//旋转文字，从I ^ 2开始，因为扇形从数学意义上的第四象限中的第一个开始，而文字的当前位置正好在圆心的上方，所以开始位置要旋转两个扇形，使其与第一个扇形的位置一致。ctx.fillText(text[i]，0，-h1 * 0.8))；CTX . restore()；//保存绘图上下文，以便保存最后绘制的扇区。} //那个。images()；CTX . draw(true)；//当参数为真时，保存当前画布的内容并继续绘制}，渲染如下

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。