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 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
走出JavaScript初学困境—js初学
Dec 29 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
vue父组件向子组件动态传值的两种方法
Nov 11 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 Javascript
解决vue中provide inject的响应式监听
Apr 19 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生成静态页面详解
2006/11/19 PHP
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
python re正则表达式模块(Regular Expression)
2014/07/16 Python
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
Hadoop中的Python框架的使用指南
2015/04/22 Python
python返回昨天日期的方法
2015/05/13 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
利用nohup来开启python文件的方法
2019/01/14 Python
python实现微信防撤回神器
2019/04/29 Python
Python如何在DataFrame增加数值
2020/02/14 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
电大自我鉴定范文
2013/10/01 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
面试复试通知单
2015/04/24 职场文书
react国际化react-intl的使用
2021/05/06 Javascript
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android