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


Posted in Javascript onApril 16, 2020

今天整理了下以前写的小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<Num;i++){
  ctx.beginPath()
  ctx.moveTo(that.w1,that.h1)
  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.fillStyle=that.color[0]
  } else {
   ctx.fillStyle=that.color[1]
  }
  ctx.fill()
  ctx.save()
  ctx.beginPath()
  ctx.fontSize=12
  ctx.fillStyle='#000'
  ctx.textAlign='center'
  ctx.textBaseline='middle'
  ctx.translate(that.w1, that.h1);//将原点移至圆形圆心位置
  ctx.rotate((itemsArc * (i + 2)) * Math.PI / 180);//旋转文字,从 i+2 开始,因为扇形是从数学意义上的第四象限第一个开始的,文字目前的位置是在圆心正上方,所以起始位置要将其旋转2个扇形的角度让其与第一个扇形的位置一致。
  ctx.fillText(that.text[i], 0, -(that.h1 * 0.8));
  ctx.restore();//保存绘图上下文,使上一个绘制的扇形保存住。
 }
}
 
 
//跑马灯绘制
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.translate(that.w2,that.h2)
  ctx2.rotate(30*i*Math.PI/180)
  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()
  ctx2.restore()//恢复之前保存的上下文,可以将循环出来的跑马灯都保存下来。没有这一句那么每循环出一个跑马灯则上一个跑马灯绘图将被覆盖,
 }
 }

小程序的代码示例

//事件处理函数
 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<itemsNum*2;i++){//跑马灯小圆圈比大圆盘等分数量多一倍
   ctx2.save()
   ctx2.beginPath()
   ctx2.translate(w2,h2)
   ctx2.rotate(30*i*Math.PI/180)
   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.restore()//恢复之前保存的上下文,可以将循环出来的跑马灯都保存下来。没有这一句那么每循环出一个跑马灯则上一个跑马灯绘图将被覆盖,
  }
  ctx2.draw()
 },
 Items(e){
  let that=this
  let itemsArc=e//每一分扇形的角度
  let Num=that.data.itemsNum// 等分数量
  let text=that.data.text// 放文字的数组
  for(let i=0;i<Num;i++){
   ctx.beginPath()
   ctx.moveTo(w1,h1)
   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(that.data.color[0])
   } else {
    ctx.setFillStyle(that.data.color[1])
   }
   ctx.fill()
   ctx.save()
   ctx.beginPath()
   ctx.setFontSize(12)
   ctx.setFillStyle('#000')
   ctx.setTextAlign('center')
   ctx.setTextBaseline('middle')
   ctx.translate(w1, h1);//将原点移至圆形圆心位置
   ctx.rotate((itemsArc * (i + 2)) * Math.PI / 180);//旋转文字,从 i+2 开始,因为扇形是从数学意义上的第四象限第一个开始的,文字目前的位置是在圆心正上方,所以起始位置要将其旋转2个扇形的角度让其与第一个扇形的位置一致。
   ctx.fillText(text[i], 0, -(h1 * 0.8));
   ctx.restore();//保存绘图上下文,使上一个绘制的扇形保存住。
  }
  // that.Images();
  ctx.draw(true);//参数为true的时候,保存当前画布的内容,继续绘制
 },

效果图如下

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
Apr 20 Javascript
尝试在让script的type属性等于text/html
Jan 15 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
jsonp跨域请求详解
Jul 13 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 Javascript
javascript json字符串到json对象转义问题
Jan 22 #Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 #Javascript
微信小程序实现九宫格抽奖
Apr 15 #Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 #Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 #Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 #Javascript
微信小程序全局变量功能与用法详解
Jan 22 #Javascript
You might like
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
php使用google地图应用实例
2014/12/31 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
php跨域调用json的例子
2013/11/13 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
Javasript设计模式之链式调用详解
2018/04/26 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
Python中的CURL PycURL使用例子
2014/06/01 Python
使用Python的PEAK来适配协议的教程
2015/04/14 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
在Python中COM口的调用方法
2019/07/03 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
Python2与Python3的区别详解
2020/02/09 Python
在pycharm中实现删除bookmark
2020/02/14 Python
利用python绘制正态分布曲线
2021/01/04 Python
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
Linux开机引导的步骤是什么
2014/02/26 面试题
init进程的作用
2015/08/20 面试题
公司保密承诺书
2014/03/27 职场文书
就业协议书怎么填
2014/09/15 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书