javascript HTML5 Canvas实现圆盘抽奖功能


Posted in Javascript onApril 11, 2016

我们经常参加各种电商优惠活动,比如购买达到一定数额进行抽奖活动,在比如微信抽奖,淘宝抽奖,迅雷赚钱宝圆盘抽奖活动等。这些抽奖活动部分就是由HTML5的Canvas来制作的,今天就为大家分享一下如何使用HTML5的Canvas来制作圆盘抽奖功能。老规矩,先看下效果图吧:

javascript HTML5 Canvas实现圆盘抽奖功能

再来看看Canvas的几个主要api:

 javascript HTML5 Canvas实现圆盘抽奖功能

全部源代码如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas圆盘抽奖应用DEMO演示</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
*{padding: 0px;margin: 0px;font-size: 16px;font-family: "Microsoft YaHei";}
.xttblog_box{width: 300px;height: 300px;margin: 100px auto;position: relative; }
.xttblog_box canvas{position: absolute;}
#xttblog{background-color: white;border-radius: 100%;}
#xttblog01,#xttblog03{left: 50px;top: 50px;z-index: 30;}
#xttblog02{left: 75px;top: 75px;z-index: 20;}
#xttblog{-o-transform: transform 6s;-ms-transform: transform 6s;-moz-transform: transform 6s;  
-webkit-transform: transform 6s;transition: transform 6s;-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;}
.taoge_btn{width: 60px;height: 60px;left: 120px;top: 120px;border-radius: 100%;
position: absolute;cursor: pointer;border: none;background: transparent;
outline: none;z-index: 40;}
</style>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
 //旋转角度
 var angles;
 //可抽奖次数
 var clickNum = 5;
 //旋转次数
 var rotNum = 0;
 //中奖公告
 var notice = null;
 //转盘初始化
 var color = ["#626262","#787878","rgba(0,0,0,0.5)","#DCC722","white","#FF4350"];
 var info = ["谢谢参与"," 1000"," 10"," 500"," 100"," 4999"," 1"," 20"];
 var info1 = ['再接再厉','  元','  元',' 淘金币','  元',' 淘金币','  元',' 淘金币']
 canvasRun();
 $('#tupBtn').bind('click',function(){
  if (clickNum >= 1) {
   //可抽奖次数减一
   clickNum = clickNum-1;
   //转盘旋转
   runCup();
   //转盘旋转过程“开始抽奖”按钮无法点击
   $('#tupBtn').attr("disabled", true);
   //旋转次数加一
   rotNum = rotNum + 1;
   //“开始抽奖”按钮无法点击恢复点击
   setTimeout(function(){
    alert(notice);
    $('#tupBtn').removeAttr("disabled", true);
   },6000);
  }
  else{
   alert("亲,抽奖次数已用光!");
  }
 });
 
 //转盘旋转
 function runCup(){
  probability();
  var degValue = 'rotate('+angles+'deg'+')';
  $('#xttblog').css('-o-transform',degValue);   //Opera
  $('#xttblog').css('-ms-transform',degValue);   //IE浏览器
  $('#xttblog').css('-moz-transform',degValue);   //Firefox
  $('#xttblog').css('-webkit-transform',degValue);  //Chrome和Safari
  $('#xttblog').css('transform',degValue);
 }
 
 //各奖项对应的旋转角度及中奖公告内容
 function probability(){
  //获取随机数
  var num = parseInt(Math.random()*(7 - 0 + 0) + 0);
  //概率
  if ( num == 0 ) {
   angles = 2160 * rotNum + 1800;
   notice = info[0] + info1[0];
  }
  //概率
  else if ( num == 1 ) {
   angles = 2160 * rotNum + 1845;
   notice = info[7] + info1[7];
  }
  //概率
  else if ( num == 2 ) {
   angles = 2160 * rotNum + 1890;
   notice = info[6] + info1[6];
  }
  //概率
  else if ( num == 3 ) {
   angles = 2160 * rotNum + 1935;
   notice = info[5] + info1[5];
  }
  //概率
  else if ( num == 4 ) {
   angles = 2160 * rotNum + 1980;
   notice = info[4] + info1[4];
  }
  //概率
  else if ( num == 5 ) {
   angles = 2160 * rotNum + 2025;
   notice = info[3] + info1[3];
  }
  //概率
  else if ( num == 6 ) {
   angles = 2160 * rotNum + 2070;
   notice = info[2] + info1[2];
  }
  //概率
  else if ( num == 7 ) {
   angles = 2160 * rotNum + 2115;
   notice = info[1] + info1[1];
  }
 }
 
 //绘制转盘
 function canvasRun(){
  var canvas=document.getElementById('xttblog');
  var canvas01=document.getElementById('xttblog01');
  var canvas03=document.getElementById('xttblog03');
  var canvas02=document.getElementById('xttblog02');
  var ctx=canvas.getContext('2d');
  var ctx1=canvas01.getContext('2d');
  var ctx3=canvas03.getContext('2d');
  var ctx2=canvas02.getContext('2d');
  createCircle();
  createCirText();
  initPoint();
  
  //外圆
  function createCircle(){
   var startAngle = 0;//扇形的开始弧度
   var endAngle = 0;//扇形的终止弧度
   //画一个8等份扇形组成的圆形
   for (var i = 0; i< 8; i++){
    startAngle = Math.PI*(i/4-1/8);
    endAngle = startAngle+Math.PI*(1/4);
    ctx.save();
    ctx.beginPath();
    ctx.arc(150,150,100, startAngle, endAngle, false);
    ctx.lineWidth = 120;
    if (i%2 == 0) {
     ctx.strokeStyle = color[0];
    }else{
     ctx.strokeStyle = color[1];
    }
    ctx.stroke();
    ctx.restore();
   }
  }
 
  //各奖项
  function createCirText(){ 
   ctx.textAlign='start';
   ctx.textBaseline='middle';
   ctx.fillStyle = color[3];
   var step = 2*Math.PI/8;
   for ( var i = 0; i < 8; i++) {
    ctx.save();
    ctx.beginPath();
    ctx.translate(150,150);
    ctx.rotate(i*step);
    ctx.font = " 20px Microsoft YaHei";
    ctx.fillStyle = color[3];
    ctx.fillText(info[i],-30,-115,60);
    ctx.font = " 14px Microsoft YaHei";
    ctx.fillText(info1[i],-30,-95,60);
    ctx.closePath();
    ctx.restore();
   }
  }
 
  function initPoint(){
   //箭头指针
   ctx1.beginPath();
   ctx1.moveTo(100,24);
   ctx1.lineTo(90,62);
   ctx1.lineTo(110,62);
   ctx1.lineTo(100,24);
   ctx1.fillStyle = color[5];
   ctx1.fill();
   ctx1.closePath();
   //中间小圆
   ctx3.beginPath();
   ctx3.arc(100,100,40,0,Math.PI*2,false);
   ctx3.fillStyle = color[5];
   ctx3.fill();
   ctx3.closePath();
   //小圆文字
   ctx3.font = "Bold 20px Microsoft YaHei";
   ctx3.textAlign='start';
   ctx3.textBaseline='middle';
   ctx3.fillStyle = color[4];
   ctx3.beginPath();
   ctx3.fillText('开始',80,90,40);
   ctx3.fillText('抽奖',80,110,40);
   ctx3.fill();
   ctx3.closePath();
   //中间圆圈
   ctx2.beginPath();
   ctx2.arc(75,75,75,0,Math.PI*2,false);
   ctx2.fillStyle = color[2];
   ctx2.fill();
   ctx2.closePath();
  }
 }
});
</script>
</head>
<body>
<div class="xttblog_box">
 <canvas id="xttblog" width="300px" height="300px">抱歉!浏览器不支持。</canvas>
 <canvas id="xttblog01" width="200px" height="200px">抱歉!浏览器不支持。</canvas>
 <canvas id="xttblog03" width="200px" height="200px">抱歉!浏览器不支持。</canvas>
 <canvas id="xttblog02" width="150px" height="150px">抱歉!浏览器不支持。</canvas>
 <button id="tupBtn" class="taoge_btn"></button>
</div>
<!-- 更改系统默认弹窗 -->
<script type="text/javascript">
window.alert = function(str)
{
 var shield = document.createElement("DIV");
 shield.id = "shield";
 shield.style.position = "absolute";
 shield.style.left = "50%";
 shield.style.top = "50%";
 shield.style.width = "280px";
 shield.style.height = "150px";
 shield.style.marginLeft = "-140px";
 shield.style.marginTop = "-110px";
 shield.style.zIndex = "25";
 var alertFram = document.createElement("DIV");
 alertFram.id="alertFram";
 alertFram.style.position = "absolute";
 alertFram.style.width = "280px";
 alertFram.style.height = "150px";
 alertFram.style.left = "50%";
 alertFram.style.top = "50%";
 alertFram.style.marginLeft = "-140px";
 alertFram.style.marginTop = "-110px";
 alertFram.style.textAlign = "center";
 alertFram.style.lineHeight = "150px";
 alertFram.style.zIndex = "300";
 strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
 strHtml += " <li style=\"background:#626262;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;color:white\">[中奖提醒]</li>\n";
 strHtml += " <li style=\"background:#787878;text-align:center;font-size:12px;height:95px;line-height:95px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;color:#DCC722\">"+str+"</li>\n";
 strHtml += " <li style=\"background:#626262;text-align:center;font-weight:bold;height:30px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确 定\" onclick=\"doOk()\" style=\"width:80px;height:20px;background:#626262;color:white;border:1px solid white;font-size:14px;line-height:20px;outline:none;margin-top: 4px\"/></li>\n";
 strHtml += "</ul>\n";
 alertFram.innerHTML = strHtml;
 document.body.appendChild(alertFram);
 document.body.appendChild(shield);
 this.doOk = function(){
  alertFram.style.display = "none";
  shield.style.display = "none";
 }
 alertFram.focus();
 document.body.onselectstart = function(){return false;};
}
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

原文地址:http://www.xttblog.com/?p=399

Javascript 相关文章推荐
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
js中this的用法实例分析
Jan 10 Javascript
js简单抽奖代码
Jan 16 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
基于JavaScript实现控制下拉列表
May 08 Javascript
JS+css3实现幻灯片轮播图
Aug 14 Javascript
详解JavaScript的另类写法
Apr 11 #Javascript
详解jQuery中的empty、remove和detach
Apr 11 #Javascript
JQuery导航菜单选择特效
Apr 11 #Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 #Javascript
javascript冒泡排序小结
Apr 10 #Javascript
javascript原生ajax写法分享
Apr 10 #Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 #Javascript
You might like
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
用PHP 4.2书写安全的脚本
2006/10/09 PHP
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
javascript入门基础之私有变量
2010/02/23 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
python求列表交集的方法汇总
2014/11/10 Python
Python写入数据到MP3文件中的方法
2015/07/10 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
python常用数据重复项处理方法
2019/11/22 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
python一些性能分析的技巧
2020/08/30 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
企业治理工作自我评价
2013/09/26 职场文书
主管竞聘书范文
2014/03/31 职场文书
助理政工师申报材料
2014/06/03 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python