canvas转盘抽奖
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转盘抽奖的更多相关文章
- canvas转盘抽奖的实现(二)
本篇是<canvas转盘抽奖的实现(一)>的另一种实现方法,主要通过css3的transform以及transition过渡来实现. // ' + r + '等奖'; } draw ...
- canvas转盘抽奖的实现(一)
网络上已经有了很多转盘抽奖的代码,但大多是用jQuery插件实现的,其中的原理比较难弄明白,于是自己摸索了一个.最终效果如下: // = totalTime) { stopRotation() ...
- HTML5 Canvas绘制转盘抽奖
新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...
- 转盘抽奖 canvas & 抽奖 H5 源码
转盘抽奖 canvas https://github.com/givebest/wechat-turntalbe-canvas https://blog.givebest.cn/GB-canvas-t ...
- 纯CSS3大转盘抽奖（响应式、可配置）
源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘 ...
- HTML5 Canvas圆盘抽奖应用（适用于Vue项目）
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- 用jQuery和PHP来实现转盘抽奖程序
准备工作 首先要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片. 接着制作html页面,实例中我们在body中加入如下代码: <div cl ...
- javascript 转盘抽奖代码和计数器代码
要介绍了javascript圆盘抽奖程序实现原理和完整代码例子,需要的朋友可以参考下 看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究... 效果预览: 一.模拟抽奖的实 ...
- jquery——九宫格大转盘抽奖
一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...
随机推荐
- js判断是否是微信浏览器
<script type="text/javascript"> window.onload = function(){ if(isWeiXin()){ var p = ...
- java字节流与字符流的区别
1.Java的字节流: InputStream是所有字节输入流的祖先,而OutputStream是所有字节输出流的祖先. 2.Java的字符流: Reader是所有读取字符串输入流的祖先,而write ...
- 制作简单的2D物理引擎（一）——动力学基础
一切的基础 点 在二维平面中,点$P$就是坐标$(x,y)$,点集就是一系列坐标的集合$\{P_1,P_2,...,P_n\}$,不过这个集合是有序的(顺时针). 向量 加减运算 $$\vec{P}\ ...
- guava学习--ratelimiter
RateLimiter类似于JDK的信号量Semphore,他用来限制对资源并发访问的线程数. RateLimiter limiter = RateLimiter.create(4.0); //每秒不 ...
- 2013年度最强AngularJS资源合集
原文在这里 2013年度最强AngularJS资源合集 来看我的视频教程,国内第一款完整的AngularJS视频教程http://www.imooc.com/learn/156 司徒正美 写道 htt ...
- 罗永浩Vs王自如：浮躁的世界该如何降温?!
这段时间智能手机业界有一件事情炒得纷纷扬扬,可谓是波澜起伏,想必大家都多少略有耳闻.昨天中午在群里看到“罗永浩舌战王自如视频”分享,就有些‘凑热闹’的好奇点开看看.一开场的几分钟正如老罗所说的那样:两 ...
- CentOS x64上Matlab R2015b的镜像安装方法与卸载
0. 原料 (1). CentOS_x64系统 CentOS 2.6.32-573.el6.x86_64 (2). Matlab R2015b_glnxa64.iso,可以从百度网盘下载到:链接: ...
- Java 设计模式之代理模式
1. 定义:为其它对象提供一种代理以控制对这个对象的访问.在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用. 2. 类图:代理对象和被代理 ...
- 在一个老外微信PM的眼中，中国移动App UI那些事儿
本文编译自Dan Grover的博客,他现在是腾讯微信的产品经理.以下是他从旧金山搬到广州后的近半年时间里,在试用过微信微博等中国主流移动App后,总结出的中美App在设计理念上的差异,并对中国移动A ...
- gridview的rowdeleting这个函数总是不执行
今天在做新闻管理时,管理数据的时候需要弹出确认删除的功能,可是此功能总是不能够实现,调试的时候也执行不到该方法,后来方向是忘记给button加上一个属性: 把CommandName设置为delete. ...