使用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. mysql-5.7安装配置指导

    mysql 安装 yum 安装mysql 源码编译安装mysql 通过yum安装 下载yum仓库配置安装包 MySQL Yum Repository http://dev.mysql.com/down ...

  2. VtigerCRM-6.4.0-zh_CN (OpenLogic CentOS 7.2)

    平台: CentOS 类型: 虚拟机镜像 软件包: vtigercrm6.4.0 commercial crm mysql open source php vtiger 简体中文版 服务优惠价: 按服 ...

  3. April 8 2017 Week 14 Saturday

    Life is the art of drawing without an eraser. 人生如画,落笔无悔. Yesterday I watched a film from Japan, Afte ...

  4. Altium_Designer17-PCB-如何重新定义板子外形

    当我们绘制完电路图.完成PCB布局和布线后,我们会遇到下面这种情况: 发现什么了吗?那么大的黑框框,我们只用到了很少的一部分.那有啥?告诉你黑框框的大小就是你最后将要印刷的PCB板的实际大小!大家都知 ...

  5. Poj(2421)，Prim最小生成树

    题目链接:http://poj.org/problem?id=2421 最小生成树的变形,有的村庄已经连接了,就直接把他们的权值赋为0,一样的做最小生成树,Prim算法. #include <s ...

  6. 种类并查集，TOJ(1706)

    题目链接:http://acm.tju.edu.cn/toj/showp1706.html 很类似Poj的一道帮派的问题,记得找到的可疑的关系,不要将集合刷新就可以了. 1706.   A Bug's ...

  7. Ubuntu 18.04 一键安装深度截图工具 Deepin Screenshot

    一直在寻找Linux下的截图软件,终于发现了Deepin ScreenShot,其功能齐全,界面美观,唯一的缺点需要自己配置快捷键(后面会讲). 安装 直接在Ubuntu商店搜索“深度截图”,点击“安 ...

  8. 使用taobao cnpm 源解决npm无法安装module问题

    npm 安装nativescript时出现异常,一直停着不动.应该是源被墙了的问题可以使用淘宝仓库,执行下面的命令: alias cnpm="npm --registry=https://r ...

  9. CPP-STL：用vector保存对象时保存指针的优点, 以及reserve的使用（转）

    代码1 #include <vector> #include <stdio.h> class A { public: A() { printf("A()/n" ...

  10. mysql如何查看错误代码具体释义？（基于perror）

    mysql如何查看错误代码具体释义? 关键词:mysql错误代码,mysql错误号 perror 错误号