使用html5 canvas 绘制的圆盘抽奖程序

效果图：

贴上全部代码：  1 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>圆盘抽奖</title>

 <style>

 *.{margin:0;padding:0;}

 #bg{position:absolute;left:200;top:200;}

 #container{width:400px;margin:150px auto;};

 </style>

 </head>

 <body>

 <div id="container">

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

 </div>

 </div>

 <script type="text/javascript">

 var fillStyle = ['rgb(255,154,0)','rgb(210,92,4)','rgb(255,154,0)','rgb(210,92,4)','rgb(255,154,0)','rgb(210,92,4)']

     ,fillText = ['一等奖','二等奖','三等奖','四等奖','五等奖','六等奖']

     ,width = 400

     ,height = 400

     ,c_x = 200

     ,c_y =200

     ,radius = 200 // 圆盘半径

     ,canvas = document.getElementById('bg')

     ,index =0

     ,timer = null

     ,running = false // 是否运行中

     ,speed = 300 // 速度

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

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

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

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

 function setup(){

     drawCircle(false);

 }

 function drawCircle(isRunning){

     var deg = Math.PI/180;

     var startAngle = 0;

     var endAngle = 60;

     canvas.height = height;

     canvas.width = width;

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

     for(var i=0;i<6;i++){

         ctx.beginPath();

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

         if(isRunning && index==i)

         {

             ctx.fillStyle = 'rgb(255,248,51)';

         }

         else

         {

             ctx.fillStyle = fillStyle[i];

         }

         // 绘制扇形

         ctx.moveTo(c_x,c_y);

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

         ctx.fill();

         // 绘制扇形上的文字

         ctx.font="14px Microsoft YaHei";

         ctx.fillStyle = '#000';

         ctx.textAlign = "center";

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

         startAngle +=60;

         endAngle +=60;

     }

         // 绘制中心圆

         ctx.beginPath();

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

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

         ctx.fill();

         // 绘制中心圆

         ctx.font="30px Microsoft YaHei";

         // 创建渐变

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

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

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

         gradient.addColorStop("0.8","red");

         // 用渐变填色

         ctx.textAlign = "center";

         ctx.fillStyle=gradient;

         ctx.fillText("开始",200,200+10);    

         // 绘制中心园边框

         ctx.strokeStyle = 'rgb(148,28,27)';

         ctx.lineWidth = 6;

         ctx.stroke();

 }

 function rotate(){

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

         clearTimer();

         speed = 100;

         timer = setInterval(rotate,speed);

     }

     if(basecircle>0 && index ==6){ // 基本圈数借宿以后，开始随机抽奖

         index = 0;

         basecircle--;

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

         {

             clearTimer();

             speed = 300;

             timer = setInterval(rotate,speed);

             isBeginPrize = true;

         }

     }

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

     {

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

         {

             clearTimer();

             isStop = true;

         }

         else

         {

             clearTimer();

             speed += 100;

             timer = setInterval(rotate,speed);

         }

     }

     drawCircle(true);

     index++;

     stepping++;

 }

 // 初始化抽奖参数

 function init()

 {

     basecircle = 3;

     selected = 4;

     running= false;

     isBeginPrize = false;

     index = 0;

     stepping = 0;

     speed = 300;

 }

 function mouseDown_Start(e){

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

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

     {

         if(running){

             return;

         }

         init();

         timer = setInterval(rotate,speed);

     }

 }

 function clearTimer(){

     clearInterval(timer);

     timer = null;

 }

 function getPointOnCanvas(canvas, x, y) {

     var bbox =canvas.getBoundingClientRect();

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

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

             };

 }

 setup();

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

 </script>

 </body>

 </html>

HTML5 canvas 圆盘抽奖的更多相关文章

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

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

  2. html5 canvas 圆形抽奖的实例

    年底没啥,抽空学习了canvas,写了个html5抽奖的代码,造了个轮子,有用的童鞋可以拿走. 其中,canvas.onclick触发抽奖行为,概率可以在core.lottery()函数上添加,美化也 ...

  3. HTML5 Canvas绘制转盘抽奖

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

  4. canvas转盘抽奖

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...

  5. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  6. 赠书：HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

  7. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  8. html5 canvas常用api总结(一)

    1.监听浏览器加载事件. window.addEventListener("load",eventWindowLoaded,false); load事件在html页面加载结束时发生 ...

  9. html5 canvas首屏自适应背景动画循环效果代码

    模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...

随机推荐

  1. 编写tab切换插件

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. Dynamics CRM 2011通过客户端代码选择视图

    在实施的过程中我们经常会遇到这样的场景,有个系统标准的Lookup字段对应的不是一种Entity,如很多地方的客户实际上可选account或者contact,有的地方可选systemuser或者tea ...

  3. 在 eclipse 中调出其内置的浏览器

    两种方法: 1.点击工具栏中的浏览器图标,就会在主面板中出现浏览器: 跳出一个blank页面,如下: 第二种方法:点击Window——Show view——Other 输入 "browser ...

  4. Java—封装

    封装 将类的某些信息隐藏在类的内部,不允许外部程序直接访问,而是通过该类提供的方法类实现对隐藏信息的操作和访问. 封装的实现步骤:修改属性的可见性(设为private)=>创建setter和ge ...

  5. 笨办法学Python（十一）

    习题 11: 提问 我已经出过很多打印相关的练习,让你习惯写简单的东西,但简单的东西都有点无聊,现在该跟上脚步了.我们现在要做的是把数据读到你的程序里边去.这可能对你有点难度,你可能一下子不明白,不过 ...

  6. leetcode: 链表2

    1. copy-list-with-random-pointer(拷贝一个带随机指针的链表) A linked list is given such that each node contains a ...

  7. IOS 设置定时器，执行方法

    //设置定时器(1秒后跳到一下题) [self performSelector:@selector(nextQuestion) withObject:nil afterDelay:1.0];

  8. 【CCPC-Wannafly Winter Camp Day3 (Div1) F】小清新数论（莫比乌斯反演+杜教筛）

    点此看题面 大致题意: 让你求出\(\sum_{i=1}^n\sum_{j=1}^n\mu(gcd(i,j))\). 莫比乌斯反演 这种题目,一看就是莫比乌斯反演啊!(连莫比乌斯函数都有) 关于莫比乌 ...

  9. ffmpeg处理RTMP流媒体的命令大全

    最近浏览国外网站时候发现,翻译不准确的敬请谅解. 1.将文件当做直播送至live ffmpeg -re -i localFile.mp4 -c copy -f flv rtmp://server/li ...

  10. P1316 丢瓶盖

    题目描述 陶陶是个贪玩的孩子,他在地上丢了A个瓶盖,为了简化问题,我们可以当作这A个瓶盖丢在一条直线上,现在他想从这些瓶盖里找出B个,使得距离最近的2个距离最大,他想知道,最大可以到多少呢? 输入输出 ...