1 <!DOCTYPE html>

  2 <html>

  3 <head>

  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  5 <title>html5 canvas圆形转盘抽奖特</title>

  6 </head>

  7 <body>

  8     <div style="width:400px;margin:40px auto 0 auto;">

  9         <canvas id='bg'></canvas>

 10     </div>

 11     <script type="text/javascript">

 12         var fillStyle =

 13                 //['rgb(255,2,0)','rgb(246,150,30)','rgb(255,255,1)','rgb(154,205,52)','rgb(34,145,103)','rgb(30,156,144)','rgb(2,128,255)','rgb(53,52,154)','rgb(128,1,128)','rgb(200,23,131)']

 14                 ['rgb(220,0,140)','rgb(250,210,50)','rgb(220,0,140)','rgb(250,210,50)','rgb(220,0,140)','rgb(250,210,50)','rgb(220,0,140)','rgb(250,210,50)','rgb(220,0,140)','rgb(250,210,50)']

 15             ,fillText = ['一等奖','二等奖','三等奖','四等奖','五等奖','六等奖','七等奖','八等奖','九等奖','十等奖']

 16             ,width = 400

 17             ,height = 400

 18             ,c_x = 200

 19             ,c_y =200

 20             ,radius = 180 // 圆盘半径

 21             ,canvas = document.getElementById('bg')

 22             ,index =0

 23             ,timer = null

 24             ,running = false // 是否运行中

 25             ,speed = 300 // 速度

 26             ,isBeginPrize = false // 是否开始抽奖

 27             ,stepping=0 // 步数，经过一个扇形为1步

 28             ,basecircle = 3 // 点击开始时，圆盘旋转的圈数，旋转玩指定圈数之后，再根据selected的值确定奖项

 29             ,selected =0; // 最终选中第几个扇形，也就是确定几等奖

 30

 31         function setup(){

 32             drawCircle(false);

 33         }

 34

 35         function drawCircle(isRunning){

 36             var deg = Math.PI/300;

 37             var startAngle = 0;

 38             var endAngle = 58;

 39             canvas.height = height;

 40             canvas.width = width;

 41             var ctx=canvas.getContext('2d');

 42             for(var i=0;i<10;i++){

 43                 ctx.beginPath();

 44                 // 正在运行的时候，改变当前扇形的颜色

 45                 if(isRunning && index==i)

 46                 {

 47                     ctx.fillStyle = 'rgb(255,0,0)';

 48                 }

 49                 else

 50                 {

 51                     ctx.fillStyle = fillStyle[i];

 52                 }

 53

 54                 // 绘制扇形

 55                 ctx.moveTo(c_x,c_y);

 56                 ctx.arc(c_x,c_y,radius,deg*startAngle,deg*endAngle,false);

 57                 ctx.fill();

 58

 59                 // 绘制扇形上的文字

 60                 ctx.font="12px Microsoft YaHei";

 61                 ctx.fillStyle = '#fff';

 62                 ctx.textAlign = "center";

 63                 ctx.fillText(fillText[i],200+Math.cos(deg*(startAngle+30))*150,200+Math.sin(deg*(startAngle+30))*150);

 64                 startAngle +=60;

 65                 endAngle +=60;

 66             }

 67

 68             // 绘制中心圆

 69             ctx.beginPath();

 70             ctx.arc(200,200,50,0,2*Math.PI,1);

 71             ctx.fillStyle = 'rgb(255,255,255)';

 72             ctx.fill();

 73             // 绘制中心圆

 74             ctx.font="15px Microsoft YaHei";

 75             // 创建渐变

 76             var gradient=ctx.createLinearGradient(0,0,width,0);

 77             gradient.addColorStop("0","magenta");

 78             gradient.addColorStop("0.2","blue");

 79             gradient.addColorStop("0.4","red");

 80             // 用渐变填色

 81             ctx.textAlign = "center";

 82             ctx.fillStyle=gradient;

 83             ctx.fillText("start",200,195+0);

 84             ctx.fillText("立即抽奖",200,200+20);

 85             // 绘制中心园边框

 86             ctx.strokeStyle = 'rgb(0,0,0)';

 87             ctx.lineWidth = 1;

 88             ctx.stroke();

 89         }

 90

 91         function rotate(){

 92             if(stepping==5){ // 4步之后开始加速

 93                 clearTimer();

 94                 speed = +100;

 95                 timer = setInterval(rotate,speed);

 96             }

 97

 98             if(basecircle>0 && index ==10){ // 基本圈数结束以后，开始随机抽奖

 99                 index = 0;

100                 basecircle--;

101                 if(basecircle == 0) // 开始随机抽奖

102                 {

103                     clearTimer();

104                     speed = 300;

105                     timer = setInterval(rotate,speed);

106                     isBeginPrize = true;

107                 }

108             }

109

110             if(isBeginPrize && selected > 0) // 开始抽奖

111             {

112                 if(--selected == 0) //到了选择的奖项之后

113                 {

114                     clearTimer();

115                     isStop = true;

116                 }

117                 else

118                 {

119                     clearTimer();

120                     speed += 100;

121                     timer = setInterval(rotate,speed);

122                 }

123             }

124             drawCircle(true);

125             index++;

126             stepping++;

127         }

128

129         // 初始化抽奖参数

130         function init()

131         {

132             basecircle = 5;

133              selected =  (Math.floor(Math.random() * 10) + 1 );//输出1-10的随机数

134             running= false;

135             isBeginPrize = false;

136             index = index++;

137             stepping = 0;

138             speed = 300;

139         }

140

141         function mouseDown_Start(e){

142             var local = getPointOnCanvas(canvas, e.pageX, e.pageY);

143             if(local.x > 100 && local.x < 300 && local.y>100 && local.y<300) // 中心圆区域

144             {

145                 if(running){

146                     return;

147                 }

148                 init();

149                 timer = setInterval(rotate,speed);

150             }

151         }

152

153         function clearTimer(){

154             clearInterval(timer);

155             timer = null;

156         }

157

158         function getPointOnCanvas(canvas, x, y) {

159             var bbox =canvas.getBoundingClientRect();

160             return { x:x- bbox.left *(canvas.width / bbox.width),

161                 y:y - bbox.top  * (canvas.height / bbox.height)

162             };

163         }

164         setup();

165         canvas.addEventListener("mousedown",mouseDown_Start,false);

166     </script>

167 </div>

168 </body>

169 </html>

canvas转盘抽奖的更多相关文章

  1. canvas转盘抽奖的实现(二)

    本篇是<canvas转盘抽奖的实现(一)>的另一种实现方法,主要通过css3的transform以及transition过渡来实现.     // ' + r + '等奖'; } draw ...

  2. canvas转盘抽奖的实现(一)

    网络上已经有了很多转盘抽奖的代码,但大多是用jQuery插件实现的,其中的原理比较难弄明白,于是自己摸索了一个.最终效果如下:     // = totalTime) { stopRotation() ...

  3. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

  4. 转盘抽奖 canvas & 抽奖 H5 源码

    转盘抽奖 canvas https://github.com/givebest/wechat-turntalbe-canvas https://blog.givebest.cn/GB-canvas-t ...

  5. 纯CSS3大转盘抽奖（响应式、可配置）

    源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘 ...

  6. HTML5 Canvas圆盘抽奖应用（适用于Vue项目）

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  7. 用jQuery和PHP来实现转盘抽奖程序

    准备工作 首先要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片. 接着制作html页面,实例中我们在body中加入如下代码: <div cl ...

  8. javascript 转盘抽奖代码和计数器代码

    要介绍了javascript圆盘抽奖程序实现原理和完整代码例子,需要的朋友可以参考下  看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究...  效果预览: 一.模拟抽奖的实 ...

  9. jquery——九宫格大转盘抽奖

    一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...

随机推荐

  1. 51nod 1113 矩阵快速幂

    题目链接:51nod 1113 矩阵快速幂 模板题,学习下. #include<cstdio> #include<cmath> #include<cstring> ...

  2. .Net Globalization and Localization

    随着互联网的发展日益壮大和活跃,网上购物交易越来越频繁,一个网站支持多种语言在所难免,所以国际化和本地化在现在的网站中的作用越来越大,一个网站的使用量和搜索量有可能受国际化的影响一点.所以在当今做一个 ...

  3. Python笔记总结week6

    关于创建.调用模块 1.我们创建一个模块commons.py,  并且在文件中写以下三个函数: def login(): print('登录') def logout(): print('退出') d ...

  4. ExtJs 进度条（轮询）

    客户端代码: Ext.onReady(function () { Ext.get('mb').on('click', function () { Ext.Ajax.request({ url: roo ...

  5. 记一次酷派尚锋Y75刷机

    昨天因为手机卡的原因,我的同学帮他的同学刷机,听他说是用刷机精灵线刷的rom包,但是刷机失败了,就来找我把弄好,他是个半吊子水平,刚接触这个东西,也是运气不好,什么刷机失败的问题都让他遇上了,刷了几个 ...

  6. Xcode7免证书真机调试

    最近一直忙于项目,对于Xcode7的一些新功能还没去尝试,今天尝试了下挺好用的!避免了以前真机调试繁琐的配置,很是爽啊.又可以节约很多小伙伴的时间了.废话不多说咱们一起来配置一下. 第一步 打开需要真 ...

  7. Delphi 中同类型方法的说明

    对象的方法能定义成静态(static).虚拟(virtual).动态(dynamic)或消息处理(message).请看下面 的例子: TFoo = class procedure IAmAStati ...

  8. 深入replace

    replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. stringObject.replace(reg/str,str/replacement); 这里主 ...

  9. 网站整体架构去Windows化

    数据层放弃SQL Server数据库和存储过程,全部迁移到Linux平台上的MySQL数据库上: 缓存不再依赖.net自身提供的缓存机制,迁移到部署在Linux平台上的分布式的Redis上: 服务之间 ...

  10. Java学习之多态

    多态的概念 多态==晚绑定. 不要把函数重载理解为多态. 因为多态是一种运行期的行为,不是编译期的行为. 多态:父类型的引用可以指向子类型的对象. 比如 Parent p = new Child(); ...