大转盘抽奖小程序版 转盘抽奖网页版

今天整理了下以前写的小demo，把大转盘抽奖的代码，整合下，列了网页版和小程序两个版本，这个转盘抽奖的核心是H5的canvas和Css3的translate属性，非常简单，写了网页版和小程序版供大家参考，主要核心代码就是利用canvas画图，完整代码见大转盘抽奖，下载可用

希望给大家带来帮助

//转盘内部绘制
lottery.prototype.getCanvasI=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)//每一份扇形的内部绘制
  this.mytime=setInterval(this.light.bind(this),1000)
}
//绘制奖品名称
lottery.prototype.Items=function(e){
  let that=this
  let itemsArc=e//每一分扇形的角度
  let Num=that.itemsNum// 等分数量
  let text=that.text// 放文字的数组
  for(let i=0;i=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 
 

小程序的代码示例

//事件处理函数
  onLoad: function (e) {
    let that=this
    let itemsArc=360/that.data.itemsNum  //获取大转盘每等分的角度
    that.setData({
      itemsArc
    },function () {
      wx.createSelectorQuery().select('#canvas-one').boundingClientRect(function (rect) {
        w1=parseInt(rect.width/2)
        h1=parseInt(rect.height/2)
        that.Items(itemsArc)//每一份扇形的内部绘制
      }).exec()
      mytime=setInterval(that.light,1000)//启动跑马灯定时器
    })
  },
  onReady:function () {
    var that=this
    wx.createSelectorQuery().select('#canvas-bg').boundingClientRect(function (rect) {//监听canvas的宽高
      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 
 

效果图如下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。