js HTML5 Canvas绘制转盘抽奖


Posted in Javascript onSeptember 13, 2020

本文实例为大家分享了js转盘抽奖的具体代码,供大家参考,具体内容如下

1.实现的基本效果

js HTML5 Canvas绘制转盘抽奖

2.主要的内容

 •html5中canvas标签的使用
 •jQueryRotate.js旋转插件

3.主要html代码

<body>
 <div class="content">
  <div class="wheel">
   <canvas class="item" id="wheelCanvas" width="422px" height="422px"></canvas>
   <img class="pointer" src="images/wheel-pointer.png"/>
  </div>
 </div>
 <div class="tips" >
  <span id="tip">jason</span>
 </div>
</body>
</html>

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)?'bold 20px Microsoft YaHei':'16px Microsoft YaHei';
    if(j == 0){
     ctx.fillText(rewardNames[j]+"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技术几乎一样....
详细代码>>>>点击下载 

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

Javascript 相关文章推荐
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
微信小程序实现星级评价效果
Dec 28 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 Javascript
jQuery学习笔记之回调函数
Aug 15 #Javascript
纯css下拉菜单 无需js
Aug 15 #Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 #Javascript
js轮盘抽奖实例分析
Apr 17 #Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 #Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 #Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 #Javascript
You might like
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
sina的lightbox效果。
2007/01/09 Javascript
原创javascript小游戏实现代码
2010/08/19 Javascript
JS高级笔记
2011/07/13 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
python保存数据到本地文件的方法
2018/06/23 Python
使用python接入微信聊天机器人
2020/03/31 Python
django如何通过类视图使用装饰器
2019/07/24 Python
基于python调用psutil模块过程解析
2019/12/20 Python
python range实例用法分享
2020/02/06 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
运动会入场解说词300字
2014/01/25 职场文书
Python数据类型最全知识总结
2021/05/31 Python