位置: IT常识 - 正文
【JavaScript】制作一个抽奖转盘页面(javascript生成器)
编辑：rootadmin【JavaScript】制作一个抽奖转盘页面 
本文链接地址:https://www.jiuchutong.com/zhishi/292337.html
转载请保留说明！
推荐整理分享【JavaScript】制作一个抽奖转盘页面(javascript生成器)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:javascript生成器,javascript制作,javascript制作,javascriptz,运用javascript制作网页,javascript怎么弄,javascript生成器,javascript怎么弄,内容如对您有帮助，希望把文章链接给更多的朋友！
开发H5项目，有时会遇到一个需求，需要制作抽奖转盘的网页，这个实现步骤，如果拿现成的改来做是容易的，但是想着全靠自己做是不容易的，下面会讲，全靠自己做，能掌握到吗
目录一览1.设计网页2. 编写脚本3. 编写模块4. 实现方法1. 绘制转盘2. 开始抽奖4.运行效果1.设计网页首先创建一个网页文件，例如index.html，制作抽奖转盘页面，源代码如下，通过修改样式<style>里设置好背景色，还有转盘组件的位置，再加一个抽奖按钮，写好大概逻辑，还有需要调用的一些方法
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Turntable 转盘</title><style>body{background-color: #333;}.box{text-align: center;}.box #box{width: 280px;height: 280px;}.box button{margin-top: 20px;padding: 0.6em 2.5em;font-size: 1em;border-radius: 10px;border-color: rgba(0, 0, 0, 0.4);color: #fff;background: linear-gradient(#eee,#f50);}</style></head><body><div class="box"><div id="box"></div><div><button id="btnStart">抽奖</button></div></div><script type="module">import Turntable from './turntable.js';//引用模块window.onload = () => {//...加载脚本}</script></body></html>2. 编写脚本接着，写一个加载脚本的处理逻辑，代码如下，使用Turntable对象创建前，需要先引用一个模块
const t = new Turntable({window,elemId: 'box',});//TODO: 最多7个const resouce = [{image: './img/e7b2e38c8d66613d1dd869b199031d8e.jpeg',title: '特等奖'},{image: './img/b5ff4601d9679f502f8f9e737bdd7049.jpeg',title: '谢谢惠顾'},{image: './img/e7b2e38c8d66613d1dd869b199031d8e.jpeg',title: '一等奖'},{image: './img/b5ff4601d9679f502f8f9e737bdd7049.jpeg',title: '谢谢惠顾'},{image: './img/e7b2e38c8d66613d1dd869b199031d8e.jpeg',title: '二等奖'},{image: './img/e7b2e38c8d66613d1dd869b199031d8e.jpeg',title: '三等奖'},{image: './img/b5ff4601d9679f502f8f9e737bdd7049.jpeg',title: '谢谢惠顾'},];//加载图片资源可能有延迟，通过异步处理Promise.all(resouce.map((item)=>{return new Promise((resolve,reject)=>{let img = new Image();img.onload = () => {item.image = img;resolve(item);};img.onerror = reject;img.src = item.image;});})).then((res)=>{t.draw({// mode:1,goods:res,});});//设置按钮点击事件document.getElementById('btnStart').onclick = () => {t.onStart({// index: 3,//抽奖概率自己写，传入预定奖品的indexsuccess:(res)=>{// console.log('ok', res);const good = res.goods[res.index];if (good.title) {if (good.title.indexOf('奖')>=0) alert(`🙂恭喜恭喜您!抽到奖品${good.title}.`)else alert('🙆很遗憾!未中奖.')}else {alert(`🙂恭喜恭喜您!抽到奖品${res.index+1}.`)}}});}3. 编写模块接下来，看上面有引用的一个模块文件turntable.js，没有的就把它新建好，在一个模块中去实现上面未实现的调用方法，代码如下
export default class Turntable {//定义私有属性#elemBgImg;#elemPointerImg;#bgImgCanvas;#pointerImgCanvas;/** * 构造函数 * */constructor(e){const { document } = e.window;// 获取占位元素（盒子）const elemBox = document.getElementById(e.elemId);// 创建元素const elemBgImg = document.createElement('img');const elemPointerImg = document.createElement('img');const size = elemBox.offsetWidth;// 设置元素样式elemBox.style.display = 'inline-block';elemBox.style.position = 'relative';elemBgImg.style.transform = `rotate(0deg)`;elemBgImg.style.pointerEvents = 'none';//屏蔽触摸点击elemPointerImg.style.pointerEvents = 'none';elemBgImg.style.position = 'absolute';elemPointerImg.style.position = 'absolute';elemPointerImg.style.margin = 'auto';elemBgImg.style.margin = 'auto';elemBgImg.style.left = 0;elemBgImg.style.top = 0;elemBgImg.style.right = 0;elemBgImg.style.bottom = 0;elemPointerImg.style.left = 0;elemPointerImg.style.top = 0;elemPointerImg.style.right = 0;elemPointerImg.style.bottom = 0;elemBgImg.width = size;elemBgImg.height = size;elemPointerImg.width = size*0.3;elemPointerImg.height = size*0.3;//将元素添加到占位元素（盒子）组件中elemBox.appendChild(elemBgImg);elemBox.appendChild(elemPointerImg);this.#elemBgImg = elemBgImg;this.#elemPointerImg = elemPointerImg;//转盘const bgImgCanvas = document.createElement('canvas');bgImgCanvas.width = size;bgImgCanvas.height = size;this.#bgImgCanvas = bgImgCanvas;//指针const pointerImgCanvas = document.createElement('canvas');pointerImgCanvas.width = elemPointerImg.width;pointerImgCanvas.height = elemPointerImg.height;this.#pointerImgCanvas = pointerImgCanvas;}/** * 销毁 * */destory(){this.#bgImgCanvas.remove();this.#pointerImgCanvas.remove();}/** * 绘制转盘组件 * */draw(config){//...}/** * 开始抽奖 * */onStart(config){//...}}4. 实现方法接下来，写方法的实现细节要复杂得多，如果看着比较吃力，就需要补充数学知识哦，关键点是三角图形学中的勾股定理，请慢慢摸索，边学边做
1. 绘制转盘先实现绘制转盘组件方法draw()，其中用到了数学的一个知识点：三角函数，代码如下
class Turntable {//定义私有属性#goods=[];#pointerDeg = 0;#mode = 0;//.../** * 绘制转盘组件 * */draw(config){const data = {padding: 5,//组件内边距goods: ['#f00','#0f0','#00f'],//默认三基色填充礼品区pointerColor: '#fa0',//指针色borderWidth: 10,//边框大小borderColor: '#fa0',//边框色imgSize: 40,//礼品图片大小mode:0,//工作模式： 0：转动转盘；1：转动指针};Object.assign(data,config);this.#mode = data.mode==0 ? 0 : 1;const bgImgCanvas = this.#bgImgCanvas;const bgImgCtx = bgImgCanvas.getContext('2d');const coodrinte = {padding: data.padding,r: bgImgCanvas.width/2-data.padding};coodrinte.centerO = coodrinte.padding + coodrinte.r;//先绘制转盘底座bgImgCtx.strokeStyle = data.borderColor;bgImgCtx.lineWidth = data.borderWidth;bgImgCtx.fillStyle = '#eee';bgImgCtx.beginPath();bgImgCtx.arc(coodrinte.centerO,coodrinte.centerO,coodrinte.r,0,Math.PI*2);bgImgCtx.fill();bgImgCtx.stroke();//再绘制转盘上的bgImgCtx.strokeStyle = 'rgba(255,255,255,0.3)';bgImgCtx.lineWidth = Math.max(1,data.borderWidth/3);bgImgCtx.textAlign = 'center';const r = coodrinte.r-bgImgCtx.lineWidth;//转盘角度（弧边）let startAngle = 0;let endAngle = 0;data.goods.forEach((item,index)=>{let good = {proportion: Math.round(1000/data.goods.length)/1000,//默认平分概率};switch(typeof item){case 'string':if (item.charAt(0)=='#') good.bgColor=item;else good.title=item;break;case 'object':Object.assign(good,item);break;default:throw new Error('定义参数goods有误');}good.startAngle = startAngle;good.endAngle = good.startAngle+Math.PI*2*good.proportion;//计算角度let angle = (good.endAngle-good.startAngle)/2-Math.PI*0.5+(index*good.proportion*Math.PI*2);//余弦函数cosA：表示在一个直角三角形中，∠A（非直角）的邻边与三角形的斜边的比let x = Math.cos(angle)*(r/2);//正弦函数sinA：表示在一个直角三角形中，∠A（非直角）的对边与三角形的斜边的比let y = Math.sin(angle)*(r/2);// console.log('angle '+angle, 'x='+x+',y='+y);good.center = {x:coodrinte.centerO+x,y:coodrinte.centerO+y,};data.goods[index] = good;startAngle = good.endAngle;});//绘制分布在转盘中的图案data.goods.forEach((item,index)=>{if (item.bgColor){bgImgCtx.fillStyle = item.bgColor;}//画划分的区域(弧边)bgImgCtx.beginPath();bgImgCtx.moveTo(coodrinte.centerO,coodrinte.centerO);bgImgCtx.arc(coodrinte.centerO,coodrinte.centerO,r,item.startAngle-Math.PI*0.5,item.endAngle-Math.PI*0.5);bgImgCtx.closePath();if (!item.bgColor) {bgImgCtx.stroke();bgImgCtx.fillStyle = '#f50';}else{}bgImgCtx.fill();//是否是转动底盘if (this.#mode==0) {bgImgCtx.save();let cX = item.center.x;let cY = item.center.y;let angle = Math.round(Math.atan(Math.abs(coodrinte.centerO-cY)/Math.abs(coodrinte.centerO-cX))*180/Math.PI);// console.log(index+'. angle > '+angle)//TODO: 暂时适配最多7个switch(angle){case 0:if (cX<coodrinte.centerO) angle+=90;else angle-=90;break;case 90:angle=0;break;default:if (cX<coodrinte.centerO){if (cY<coodrinte.centerO){angle+=90;}else if (angle<20) {angle+=45;}else if (angle<38) {angle-=25;}else if (angle<=40) {angle+=10;}else if (angle==45) {}else if (angle<=60) {angle-=30;}else {angle+=10;}}else{if (cY<coodrinte.centerO){angle=270-angle;}else{angle-=90;}}}if (angle!=0){//旋转角度，以转盘中心点对齐angle=Math.PI*(angle/180);bgImgCtx.translate(cX,cY);bgImgCtx.rotate(angle);bgImgCtx.translate(-cX,-cY);}}if (item.image) {bgImgCtx.drawImage(item.image,item.center.x-data.imgSize*0.5,item.center.y-data.imgSize*0.5,data.imgSize,data.imgSize);}if (item.title) {bgImgCtx.fillStyle = '#fff';bgImgCtx.fillText(item.title,item.center.x,item.image ? (item.center.y+data.imgSize*0.9) : item.center.y);}if (this.#mode==0){bgImgCtx.restore();}//画辅助线// bgImgCtx.beginPath();// bgImgCtx.moveTo(coodrinte.centerO,coodrinte.centerO);// bgImgCtx.lineTo(item.center.x,item.center.y);// bgImgCtx.stroke();});this.#goods = data.goods;this.#elemBgImg.src = bgImgCanvas.toDataURL();//绘制指针const pointerImgCanvas = this.#pointerImgCanvas;const pointerImgCtx = pointerImgCanvas.getContext('2d');const pointerData = {r: pointerImgCanvas.width/2};pointerData.r1 = pointerData.r*0.36;pointerData.r2 = pointerData.r*0.60;pointerImgCtx.fillStyle = data.pointerColor;startAngle = Math.PI*1.58;endAngle = startAngle + Math.PI*1.86;pointerImgCtx.lineWidth = 2;pointerImgCtx.beginPath();pointerImgCtx.arc(pointerData.r,pointerData.r,pointerData.r2,startAngle,endAngle);pointerImgCtx.lineTo(pointerData.r,0);pointerImgCtx.closePath();pointerImgCtx.fill();pointerImgCtx.stroke();//将绘制的图形设置到图片元素this.#elemPointerImg.src = pointerImgCanvas.toDataURL();}}2. 开始抽奖实现开始抽奖方法onStart(),可通过传入参数对象config，修改默认配置，代码如下，抽奖结果会通过回调方法succes()返回
class Turntable {//定义私有属性#animing = false;//.../** * 开始抽奖 * */onStart(config){if (this.#animing) return;//防止双击(误操作)this.#animing = true;const data = {minRotationNum: 3,//至少转动圈数duration:3,//转动耗时3ssuccess(res){},//结束时回调index: -1,//抽得预定奖品，默认随机};Object.assign(data,config);const goods = this.#goods;if (data.index<0 || data.index>=goods.length) {//抽得随机奖品data.index = Math.trunc(Math.random()*10%goods.length);}const elemActive = this.#mode==0 ? this.#elemBgImg : this.#elemPointerImg;const style = elemActive.style;const pointerDeg = this.#pointerDeg;const index = data.index;//定义动画结束监听const listener = (event) => {event.preventDefault();elemActive.removeEventListener('transitionend', listener);//重置动画样式style.transition = 'none';style.transform = `rotate(${this.#pointerDeg}deg)`;//结束和回调this.#animing = false;data.success({goods,index});};elemActive.addEventListener('transitionend', listener, false);//处理过渡动画let inDeg = Math.round(goods[index].startAngle/Math.PI*180);let outDeg = Math.round(goods[index].endAngle/Math.PI*180);let deg = (Math.round(Math.random()*(outDeg-inDeg)))+inDeg;// console.log('rand '+index, `${inDeg}°~${outDeg}° ${deg}° current:${pointerDeg}`);//转盘是反向旋转的if (this.#mode==0) deg = 360-deg;deg += (Math.round(Math.random()*10)+data.minRotationNum)*360;//简化角度this.#pointerDeg = deg%360;//修改完样式，就可开始动画style.transition = `all ${data.duration}s ease-out`;style.transform = `rotate(${deg}deg)`;}}4.运行效果讲到最后，用浏览器打开网页index.html浏览看看，正常的话，运行效果图如下
💡小提示
试试修改传入的参数，例如
t.draw({//...mode:1,//改变为指针转动/...});//...t.onStart({index: 3,//抽奖概率自己写，传入预定奖品的indexsuccess:(res)=>{ //...}});可根据其它的需求改
到此结束，如阅读中有遇到什么问题，请在文章结尾评论处留言，ヾ(￣▽￣)ByeBye
上一篇：【爬坑之路一】windows系统下更新升级node版本【亲测有效】(爬坑图片卡通)
下一篇：在树洞中休息的鸣角鸮，纽约马萨皮夸保护区 (© Vicki Jauron, Babylon and Beyond Photography/Getty Images)(在树洞中休息的英语)
