1. 1 <!DOCTYPE html>
  2. 2 <html>
  3. 3 <head>
  4. 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. 5 <title>html5 canvas圆形转盘抽奖特</title>
  6. 6 </head>
  7. 7 <body>
  8. 8 <div style="width:400px;margin:40px auto 0 auto;">
  9. 9 <canvas id='bg'></canvas>
  10. 10 </div>
  11. 11 <script type="text/javascript">
  12. 12 var fillStyle =
  13. 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. 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. 15 ,fillText = ['一等奖','二等奖','三等奖','四等奖','五等奖','六等奖','七等奖','八等奖','九等奖','十等奖']
  16. 16 ,width = 400
  17. 17 ,height = 400
  18. 18 ,c_x = 200
  19. 19 ,c_y =200
  20. 20 ,radius = 180 // 圆盘半径
  21. 21 ,canvas = document.getElementById('bg')
  22. 22 ,index =0
  23. 23 ,timer = null
  24. 24 ,running = false // 是否运行中
  25. 25 ,speed = 300 // 速度
  26. 26 ,isBeginPrize = false // 是否开始抽奖
  27. 27 ,stepping=0 // 步数,经过一个扇形为1步
  28. 28 ,basecircle = 3 // 点击开始时,圆盘旋转的圈数,旋转玩指定圈数之后,再根据selected的值确定奖项
  29. 29 ,selected =0; // 最终选中第几个扇形,也就是确定几等奖
  30. 30
  31. 31 function setup(){
  32. 32 drawCircle(false);
  33. 33 }
  34. 34
  35. 35 function drawCircle(isRunning){
  36. 36 var deg = Math.PI/300;
  37. 37 var startAngle = 0;
  38. 38 var endAngle = 58;
  39. 39 canvas.height = height;
  40. 40 canvas.width = width;
  41. 41 var ctx=canvas.getContext('2d');
  42. 42 for(var i=0;i<10;i++){
  43. 43 ctx.beginPath();
  44. 44 // 正在运行的时候,改变当前扇形的颜色
  45. 45 if(isRunning && index==i)
  46. 46 {
  47. 47 ctx.fillStyle = 'rgb(255,0,0)';
  48. 48 }
  49. 49 else
  50. 50 {
  51. 51 ctx.fillStyle = fillStyle[i];
  52. 52 }
  53. 53
  54. 54 // 绘制扇形
  55. 55 ctx.moveTo(c_x,c_y);
  56. 56 ctx.arc(c_x,c_y,radius,deg*startAngle,deg*endAngle,false);
  57. 57 ctx.fill();
  58. 58
  59. 59 // 绘制扇形上的文字
  60. 60 ctx.font="12px Microsoft YaHei";
  61. 61 ctx.fillStyle = '#fff';
  62. 62 ctx.textAlign = "center";
  63. 63 ctx.fillText(fillText[i],200+Math.cos(deg*(startAngle+30))*150,200+Math.sin(deg*(startAngle+30))*150);
  64. 64 startAngle +=60;
  65. 65 endAngle +=60;
  66. 66 }
  67. 67
  68. 68 // 绘制中心圆
  69. 69 ctx.beginPath();
  70. 70 ctx.arc(200,200,50,0,2*Math.PI,1);
  71. 71 ctx.fillStyle = 'rgb(255,255,255)';
  72. 72 ctx.fill();
  73. 73 // 绘制中心圆
  74. 74 ctx.font="15px Microsoft YaHei";
  75. 75 // 创建渐变
  76. 76 var gradient=ctx.createLinearGradient(0,0,width,0);
  77. 77 gradient.addColorStop("0","magenta");
  78. 78 gradient.addColorStop("0.2","blue");
  79. 79 gradient.addColorStop("0.4","red");
  80. 80 // 用渐变填色
  81. 81 ctx.textAlign = "center";
  82. 82 ctx.fillStyle=gradient;
  83. 83 ctx.fillText("start",200,195+0);
  84. 84 ctx.fillText("立即抽奖",200,200+20);
  85. 85 // 绘制中心园边框
  86. 86 ctx.strokeStyle = 'rgb(0,0,0)';
  87. 87 ctx.lineWidth = 1;
  88. 88 ctx.stroke();
  89. 89 }
  90. 90
  91. 91 function rotate(){
  92. 92 if(stepping==5){ // 4步之后开始加速
  93. 93 clearTimer();
  94. 94 speed = +100;
  95. 95 timer = setInterval(rotate,speed);
  96. 96 }
  97. 97
  98. 98 if(basecircle>0 && index ==10){ // 基本圈数结束以后,开始随机抽奖
  99. 99 index = 0;
  100. 100 basecircle--;
  101. 101 if(basecircle == 0) // 开始随机抽奖
  102. 102 {
  103. 103 clearTimer();
  104. 104 speed = 300;
  105. 105 timer = setInterval(rotate,speed);
  106. 106 isBeginPrize = true;
  107. 107 }
  108. 108 }
  109. 109
  110. 110 if(isBeginPrize && selected > 0) // 开始抽奖
  111. 111 {
  112. 112 if(--selected == 0) //到了选择的奖项之后
  113. 113 {
  114. 114 clearTimer();
  115. 115 isStop = true;
  116. 116 }
  117. 117 else
  118. 118 {
  119. 119 clearTimer();
  120. 120 speed += 100;
  121. 121 timer = setInterval(rotate,speed);
  122. 122 }
  123. 123 }
  124. 124 drawCircle(true);
  125. 125 index++;
  126. 126 stepping++;
  127. 127 }
  128. 128
  129. 129 // 初始化抽奖参数
  130. 130 function init()
  131. 131 {
  132. 132 basecircle = 5;
  133. 133 selected = (Math.floor(Math.random() * 10) + 1 );//输出1-10的随机数
  134. 134 running= false;
  135. 135 isBeginPrize = false;
  136. 136 index = index++;
  137. 137 stepping = 0;
  138. 138 speed = 300;
  139. 139 }
  140. 140
  141. 141 function mouseDown_Start(e){
  142. 142 var local = getPointOnCanvas(canvas, e.pageX, e.pageY);
  143. 143 if(local.x > 100 && local.x < 300 && local.y>100 && local.y<300) // 中心圆区域
  144. 144 {
  145. 145 if(running){
  146. 146 return;
  147. 147 }
  148. 148 init();
  149. 149 timer = setInterval(rotate,speed);
  150. 150 }
  151. 151 }
  152. 152
  153. 153 function clearTimer(){
  154. 154 clearInterval(timer);
  155. 155 timer = null;
  156. 156 }
  157. 157
  158. 158 function getPointOnCanvas(canvas, x, y) {
  159. 159 var bbox =canvas.getBoundingClientRect();
  160. 160 return { x:x- bbox.left *(canvas.width / bbox.width),
  161. 161 y:y - bbox.top * (canvas.height / bbox.height)
  162. 162 };
  163. 163 }
  164. 164 setup();
  165. 165 canvas.addEventListener("mousedown",mouseDown_Start,false);
  166. 166 </script>
  167. 167 </div>
  168. 168 </body>
  169. 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. gulp教程之gulp-rev-append

    简介: 使用gulp-rev-append给页面的引用添加版本号,清除页面引用缓存. 1.安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 ...

  2. MVC MVP 和 MVVM的图示

    一直对于这些什么MVC MVP 和 MVVM都是云里雾里的 完全分不清楚 感觉jq上也没怎么用过,理解也很片面,画几张图也许能够大体分清他们之间的区别. 1.MVC(Model-View-Contro ...

  3. vs启动调试很慢的解决办法

    1.关闭所有 Visual Studio 2010 实例. 2.单击“开始”,选择“运行...”. 3.键入“devenv.exe /resetuserdata”. 此命令会运行几分钟时间,与此同时, ...

  4. javascript实现列表的点击展开折叠

    <script> window.onload = function() { //要折叠的区域 var catalog = document.getElementById("div ...

  5. RP4412开发板烧写Ubuntu12.04失败原因分析解决

    Ubuntu烧写失败可能是卡的问题 问:用RP4412开发板,卡烧了光盘中的fastboot失败,现在如何补救呢? 答:INAND格式化,利用usb来升级啊. 也有文档,看升级文档. 问:这个是怎么回 ...

  6. css3各个属性的兼容

    1.transition:IE10. Firefox.Opera.Chrome支持: Safari支持替代的-webkit-transition属性: 2.animation: IE10.FIrefo ...

  7. 160个crackme-之Acid burn.exe

    工具: Ollydbg(OD) 中文版 运行: 我们拿到一个小程序时,总要看看它到底有什么功能,或者说它阻碍了我们什么,也就是寻找突破口! 这就是程序运行后的主界面 我们进入Serial/Name后, ...

  8. windows本地script脚本恶意代码分析(带注释)

    //经过样本分析和抓取,该恶意程序是款下载者木马. //不懂的可以百度百科. http://baike.baidu.com/link?url=0dNqFM8QIjEQhD71ofElH0wHGktIQ ...

  9. 关于Gridview的列名问题

    Gridview的的数据绑定方法有两种: 一种就是datasourceid的绑定在绑定过程当中也可以通过select来选择性的绑定. 二种就是databind(): SqlDataAdapter da ...

  10. MySQL主主复制

    MySQL5. 主主复制 环境如下: CentOS6.4_64 MySQL5. master1:192.168.10.11 master2:192.168.10.12 1.1 配置 master1 a ...