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 相关文章推荐
cument.execCommand()用法深入理解
Dec 04 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 Javascript
jquery实现上传文件进度条
Mar 26 jQuery
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实现根据词频生成tag云的方法
2015/04/17 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
显示、隐藏密码
2006/07/01 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
python模块之time模块(实例讲解)
2017/09/13 Python
python机器学习之神经网络(二)
2017/12/20 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
美国汽车交易网站:Edmunds
2016/08/17 全球购物
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
小学教师师德整改措施
2014/09/29 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
民事辩护词范文
2015/05/21 职场文书
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
Java spring单点登录系统
2021/09/04 Java/Android
R9700摩机记
2022/04/05 无线电
APP界面设计技巧和注意事项
2022/04/29 杂记