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 相关文章推荐
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
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开发的一些注意点总结
2010/10/12 PHP
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
php使用codebase生成随机数
2014/03/25 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
php进程间通讯实例分析
2016/07/11 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
jQuery标签替换函数replaceWith()的使用例子
2014/08/28 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
Python 画出来六维图
2019/07/26 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
《圆明园的毁灭》教学反思
2014/02/28 职场文书
学校节能减排倡议书
2014/05/16 职场文书
出租车拒载检讨书
2015/01/28 职场文书
毕业设计致谢词
2015/05/14 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
初中政治教学反思
2016/02/23 职场文书
python基础详解之if循环语句
2021/04/24 Python
python中的plt.cm.Paired用法说明
2021/05/31 Python