大轉盤抽獎小程序版 轉盤抽獎網頁版
更新時間：2020年04月16日 15:31:23 作者：今天也在寫bug
這篇文章主要為大家詳細介紹了大轉盤抽獎小程序版和網頁版，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
今天整理了下以前寫的小demo，把大轉盤抽獎的代碼，整合下，列了網頁版和小程序兩個版本，這個轉盤抽獎的核心是H5的canvas和Css3的translate屬性，非常簡單，寫了網頁版和小程序版供大家參考，主要核心代碼就是利用canvas畫圖，完整代碼見大轉盤抽獎，下載可用
希望給大家?guī)韼椭?/p>
//轉盤內部繪制
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// 等分數(shù)量
let text=that.text// 放文字的數(shù)組
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) {//繪制偶數(shù)扇形和奇數(shù)扇形的顏色不同
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 開始，因為扇形是從數(shù)學意義上的第四象限第一個開始的，文字目前的位置是在圓心正上方，所以起始位置要將其旋轉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++){//跑馬燈小圓圈比大圓盤等分數(shù)量多一倍
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)//圓形跑馬燈小圓圈
//跑馬燈第一次閃爍時與第二次閃爍時繪制相反的顏色，再配上定時器循環(huán)閃爍就可以達到跑馬燈一閃一閃的效果了
if(that.lamp==0){//第一次閃爍時偶數(shù)奇數(shù)的跑馬燈各繪制一種顏色
if(i%2==0){
ctx2.fillStyle="#FBF1A9";
} else {
ctx2.fillStyle="#fbb936";
}
}else {//第二次閃爍時偶數(shù)奇數(shù)的跑馬燈顏色對調
if (i % 2 == 0) {
ctx2.fillStyle="#fbb936";
} else {
ctx2.fillStyle="#FBF1A9";
}
}
ctx2.fill()
ctx2.restore()//恢復之前保存的上下文，可以將循環(huán)出來的跑馬燈都保存下來。沒有這一句那么每循環(huán)出一個跑馬燈則上一個跑馬燈繪圖將被覆蓋，
}
}
小程序的代碼示例
//事件處理函數(shù)
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) {//監(jiān)聽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++){//跑馬燈小圓圈比大圓盤等分數(shù)量多一倍
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)//繪制圓形跑馬燈小圓圈
//跑馬燈第一次閃爍時與第二次閃爍時繪制相反的顏色，再配上定時器循環(huán)閃爍就可以達到跑馬燈一閃一閃的效果了
if(lamp==0){//第一次閃爍時偶數(shù)奇數(shù)的跑馬燈各繪制一種顏色
if(i%2==0){
ctx2.setFillStyle("#FBF1A9");
} else {
ctx2.setFillStyle("#fbb936");
}
}else {//第二次閃爍時偶數(shù)奇數(shù)的跑馬燈顏色對調
if (i % 2 == 0) {
ctx2.setFillStyle("#fbb936");
} else {
ctx2.setFillStyle("#FBF1A9");
}
}
ctx2.fill()
ctx2.restore()//恢復之前保存的上下文，可以將循環(huán)出來的跑馬燈都保存下來。沒有這一句那么每循環(huán)出一個跑馬燈則上一個跑馬燈繪圖將被覆蓋，
}
ctx2.draw()
},
Items(e){
let that=this
let itemsArc=e//每一分扇形的角度
let Num=that.data.itemsNum// 等分數(shù)量
let text=that.data.text// 放文字的數(shù)組
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) {//繪制偶數(shù)扇形和奇數(shù)扇形的顏色不同
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 開始，因為扇形是從數(shù)學意義上的第四象限第一個開始的，文字目前的位置是在圓心正上方，所以起始位置要將其旋轉2個扇形的角度讓其與第一個扇形的位置一致。
ctx.fillText(text[i], 0, -(h1 * 0.8));
ctx.restore();//保存繪圖上下文，使上一個繪制的扇形保存住。
}
// that.Images();
ctx.draw(true);//參數(shù)為true的時候，保存當前畫布的內容，繼續(xù)繪制
},
效果圖如下
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了js實現(xiàn)使用鼠標拖拽切換圖片的方法,涉及javascript操作圖片實現(xiàn)輪播效果的相關技巧,非常具有實用價值,需要的朋友可以參考下2015-05-05
JavaScript實現(xiàn)將Word文檔解析成瀏覽器認識的HTML
這篇文章主要為大家詳細介紹了如何使用JavaScript實現(xiàn)將Word文檔解析成瀏覽器認識的HTML,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下2024-02-02
layui 關閉open彈出框 刷新table表格頁面的方法
今天小編就為大家分享一篇layui 關閉open彈出框 刷新table表格頁面的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章為大家詳細主要介紹了用JavaScript實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
JavaScript中如何使用cookie實現(xiàn)記住密碼功能及cookie相關函數(shù)介紹
cookie是網站設計者放置在客戶端（瀏覽器）的小文本文件，cookie不僅能夠實現(xiàn)保存密碼功能，還可以通過cookie保存最近瀏覽記錄增加用戶體驗。本文給大家介紹js使用cookie實現(xiàn)記住密碼功能及cookie相關函數(shù)講解，感興趣的朋友一起看看吧2016-11-11
這篇文章主要介紹了微信小程序實現(xiàn)獲取準確的騰訊定位地址功能,結合實例形式詳細分析了微信小程序使用騰訊地理位置接口的相關注冊、操作步驟及接口使用技巧,需要的朋友可以參考下2019-03-03
這篇文章主要為大家詳細介紹了js實現(xiàn)左右兩側浮動廣告，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要介紹了js實現(xiàn)獲取兩個日期之間所有日期的方法,涉及javascript針對日期與時間的相關操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
本文為大家寫了個很漂亮、兼容火狐的Js日期選擇，自動填充到輸入框，代碼如下，有需要的朋友可以參考下2013-08-08
JavaScript使用面向對象實現(xiàn)的拖拽功能詳解
這篇文章主要介紹了JavaScript使用面向對象實現(xiàn)的拖拽功能,結合實例形式詳細分析了javascript基于面向對象的拖拽功能實現(xiàn)思路、原理與具體操作技巧,需要的朋友可以參考下2019-06-06