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的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
JS中的变量作用域(console版)
Jul 18 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 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接口中interface存在的意义
2013/06/27 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
php中执行系统命令的方法
2015/03/21 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
php实现微信发红包功能
2018/07/13 PHP
JS 面向对象的5钟写法
2009/07/31 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
Javascript 去除数组的重复元素
2010/05/04 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
Python创建xml的方法
2015/03/10 Python
使用python实现tcp自动重连
2017/07/02 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
简单了解python关键字global nonlocal区别
2020/09/21 Python
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
html5定位并在百度地图上显示的示例
2014/04/27 HTML / CSS
青年志愿者先进事迹
2014/05/06 职场文书
校庆标语集锦
2014/06/25 职场文书
医院党员公开承诺书
2014/08/30 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
刮痧观后感
2015/06/05 职场文书