南强小屋 Design By 杰米
本文实例为大家分享了js转盘抽奖的具体代码，供大家参考，具体内容如下
1.实现的基本效果
2.主要的内容
"htmlcode">
<body> <div class="content"> <div class="wheel"> <canvas class="item" id="wheelCanvas" width="422px" height="422px"></canvas> <img class="pointer" src="/UploadFiles/2021-04-02/wheel-pointer.png">4.主要的css代码
.content{ display:block; width:95%; margin: 30px auto; } .content .wheel{ display:block; width:100%; position:relative; background-image:url(../images/wheel-bg.png); background-size:100% 100%; } .content .wheel canvas.item{ width:100%; } .content .wheel img.pointer{ position:absolute; width:31.5%; height:42.5%; left:34.6%; top:23%; } .tips{ text-align:center; margin:20px 0; font:normal 24px 'MicroSoft YaHei'; }5.核心js代码
/* * 渲染转盘 * */ function drawWheelCanvas(){ // 获取canvas画板，相当于layer？？ var canvas = document.getElementById("wheelCanvas"); // var canvas = ($("#wheelCanvas")).get()[0]; // 注意，jQuery获取的是包装过的对象，不是DOM对象,可以进行转换 // 计算每块占的角度，弧度制 var baseAngle = Math.PI * 2 / (turnWheel.rewardNames.length); // 获取上下文 var ctx=canvas.getContext("2d"); var canvasW = canvas.width; // 画板的高度 var canvasH = canvas.height; // 画板的宽度 //在给定矩形内清空一个矩形 ctx.clearRect(0,0,canvasW,canvasH); //strokeStyle 绘制颜色 ctx.strokeStyle = "#FFBE04"; // 红色 //font 画布上文本内容的当前字体属性 ctx.font = '16px Microsoft YaHei'; // 注意，开始画的位置是从0°角的位置开始画的。也就是水平向右的方向。 // 画具体内容 for(var index = 0 ; index < turnWheel.rewardNames.length ; index++) { // 当前的角度 var angle = turnWheel.startAngle + index * baseAngle; // 填充颜色 ctx.fillStyle = turnWheel.colors[index]; // 开始画内容 // ---------基本的背景颜色---------- ctx.beginPath(); /* * 画圆弧，和IOS的Quartz2D类似 * context.arc(x,y,r,sAngle,eAngle,counterclockwise); * x :圆的中心点x * y :圆的中心点x * sAngle,eAngle :起始角度、结束角度 * counterclockwise : 绘制方向,可选，False = 顺时针，true = 逆时针 * */ ctx.arc(canvasW * 0.5, canvasH * 0.5, turnWheel.outsideRadius, angle, angle + baseAngle, false); ctx.arc(canvasW * 0.5, canvasH * 0.5, turnWheel.insideRadius, angle + baseAngle, angle, true); ctx.stroke(); ctx.fill(); //保存画布的状态，和图形上下文栈类似，后面可以Restore还原状态（坐标还原为当前的0，0）， ctx.save(); /*----绘制奖品内容----重点----*/ // 红色字体 ctx.fillStyle = "#E5302F"; var rewardName = turnWheel.rewardNames[index]; var line_height = 17; // translate方法重新映射画布上的 (0,0) 位置 // context.translate(x,y); // 见PPT图片， var translateX = canvasW * 0.5 + Math.cos(angle + baseAngle / 2) * turnWheel.textRadius; var translateY = canvasH * 0.5 + Math.sin(angle + baseAngle / 2) * turnWheel.textRadius; ctx.translate(translateX,translateY); // rotate方法旋转当前的绘图，因为文字适合当前扇形中心线垂直的！ // angle，当前扇形自身旋转的角度 + baseAngle / 2 中心线多旋转的角度 + 垂直的角度90° ctx.rotate(angle + baseAngle / 2 + Math.PI / 2); /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/ // canvas 的 measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。 // fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色. fillStyle 属性以另一种颜色/渐变来渲染文本 /* * context.fillText(text,x,y,maxWidth); * 注意！！！y是文字的最底部的值，并不是top的值！！！ * */ if(rewardName.indexOf("M")>0){//查询是否包含字段 流量包 var rewardNames = rewardName.split("M"); for(var j = 0; j<rewardNames.length; j++){ ctx.font = (j == 0)"M", -ctx.measureText(rewardNames[j]+"M").width / 2, j * line_height); }else{ ctx.fillText(rewardNames[j], -ctx.measureText(rewardNames[j]).width / 2, j * line_height); } } }else if(rewardName.indexOf("M") == -1 && rewardName.length>6){//奖品名称长度超过一定范围 rewardName = rewardName.substring(0,6)+"||"+rewardName.substring(6); var rewardNames = rewardName.split("||"); for(var j = 0; j<rewardNames.length; j++){ ctx.fillText(rewardNames[j], -ctx.measureText(rewardNames[j]).width / 2, j * line_height); } }else{ //在画布上绘制填色的文本。文本的默认颜色是黑色 ctx.fillText(rewardName, -ctx.measureText(rewardName).width / 2, 0); } //添加对应图标 if(rewardName.indexOf("Q币")>0){ // 注意，这里要等到img加载完成才能绘制 imgQb.onload=function(){ ctx.drawImage(imgQb,-15,10); }; ctx.drawImage(imgQb,-15,10); }else if(rewardName.indexOf("谢谢参与")>=0){ imgSorry.onload=function(){ ctx.drawImage(imgSorry,-15,10); }; ctx.drawImage(imgSorry,-15,10); } //还原画板的状态到上一个save()状态之前 ctx.restore(); /*----绘制奖品结束----*/ } }最后
这玩意和IOS里面的Quartz2D技术几乎一样....
详细代码点击下载以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无js HTML5 Canvas绘制转盘抽奖的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。