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

效果图：

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

  1.  <html>
  2.  <head>
  3.  <meta charset="UTF-8">
  4.  <title>圆盘抽奖</title>
  5.  <style>
  6.  *.{margin:0;padding:0;}
  8.  #bg{position:absolute;left:200;top:200;}
  9.  #container{width:400px;margin:150px auto;};
  11.  </style>
  12.  </head>
  13.  <body>
  15.  <div id="container">
  16.  <canvas id='bg'></canvas>
  17.  </div>
  19.  </div>
  21.  <script type="text/javascript">
  22.  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)']
  23.      ,fillText = ['一等奖','二等奖','三等奖','四等奖','五等奖','六等奖']
  24.      ,width = 400
  25.      ,height = 400
  26.      ,c_x = 200
  27.      ,c_y =200
  28.      ,radius = 200 // 圆盘半径
  29.      ,canvas = document.getElementById('bg')
  30.      ,index =0
  31.      ,timer = null
  32.      ,running = false // 是否运行中
  33.      ,speed = 300 // 速度
  34.      ,isBeginPrize = false // 是否开始抽奖
  35.      ,stepping=0 // 步数，经过一个扇形为1步
  36.      ,basecircle = 3 // 点击开始时，圆盘旋转的圈数，旋转玩指定圈数之后，再根据selected的值确定奖项
  37.      ,selected =4; // 最终选中第几个扇形，也就是确定几等奖
  38.  function setup(){
  39.      drawCircle(false);
  40.  }
  41.  function drawCircle(isRunning){
  42.      var deg = Math.PI/180;
  43.      var startAngle = 0;
  44.      var endAngle = 60;
  45.      canvas.height = height;
  46.      canvas.width = width;
  47.      var ctx=canvas.getContext('2d');
  48.      for(var i=0;i<6;i++){
  49.          ctx.beginPath();
  51.          // 正在运行的时候，改变当前扇形的颜色
  52.          if(isRunning && index==i)
  53.          {
  54.              ctx.fillStyle = 'rgb(255,248,51)';
  55.          }
  56.          else
  57.          {
  58.              ctx.fillStyle = fillStyle[i];
  59.          }
  61.          // 绘制扇形
  62.          ctx.moveTo(c_x,c_y);
  63.          ctx.arc(c_x,c_y,radius,deg*startAngle,deg*endAngle,false);
  64.          ctx.fill();
  66.          // 绘制扇形上的文字
  67.          ctx.font="14px Microsoft YaHei";
  68.          ctx.fillStyle = '#000';
  69.          ctx.textAlign = "center";
  70.          ctx.fillText(fillText[i],200+Math.cos(deg*(startAngle+30))*150,200+Math.sin(deg*(startAngle+30))*150);
  71.          startAngle +=60;
  72.          endAngle +=60;
  73.      }
  75.          // 绘制中心圆
  76.          ctx.beginPath();
  77.          ctx.arc(200,200,100,0,2*Math.PI,1);
  78.          ctx.fillStyle = 'rgb(255,255,255)';
  79.          ctx.fill();
  81.          // 绘制中心圆
  82.          ctx.font="30px Microsoft YaHei";
  83.          // 创建渐变
  84.          var gradient=ctx.createLinearGradient(0,0,width,0);
  85.          gradient.addColorStop("0","magenta");
  86.          gradient.addColorStop("0.2","blue");
  87.          gradient.addColorStop("0.8","red");
  88.          // 用渐变填色
  89.          ctx.textAlign = "center";
  90.          ctx.fillStyle=gradient;
  91.          ctx.fillText("开始",200,200+10);    
  93.          // 绘制中心园边框
  94.          ctx.strokeStyle = 'rgb(148,28,27)';
  95.          ctx.lineWidth = 6;
  96.          ctx.stroke();
  97.  }
  99.  function rotate(){
  100.      if(stepping==4){ // 4步之后开始加速
  101.          clearTimer();
  102.          speed = 100;
  103.          timer = setInterval(rotate,speed);
  104.      }
  106.      if(basecircle>0 && index ==6){ // 基本圈数借宿以后，开始随机抽奖
  107.          index = 0;
  108.          basecircle--;
  109.          if(basecircle == 0) // 开始随机抽奖
  110.          {
  111.              clearTimer();
  112.              speed = 300;
  113.              timer = setInterval(rotate,speed);
  114.              isBeginPrize = true;
  115.          }
  116.      }
  118.      if(isBeginPrize && selected > 0) // 开始抽奖
  119.      {
  120.          if(--selected == 0) //到了选择的奖项之后
  121.          {
  122.              clearTimer();
  123.              isStop = true;
  124.          }
  125.          else
  126.          {
  127.              clearTimer();
  128.              speed += 100;
  129.              timer = setInterval(rotate,speed);
  130.          }
  132.      }
  134.      drawCircle(true);
  135.      index++;
  136.      stepping++;
  137.  }
  139.  // 初始化抽奖参数
  140.  function init()
  141.  {
  142.      basecircle = 3;
  143.      selected = 4;
  145.      running= false;
  146.      isBeginPrize = false;
  148.      index = 0;
  149.      stepping = 0;
  150.      speed = 300;
  152.  }
  154.  function mouseDown_Start(e){
  156.      var local = getPointOnCanvas(canvas, e.pageX, e.pageY);
  158.      if(local.x > 100 && local.x < 300 && local.y>100 && local.y<300) // 中心圆区域
  159.      {
  161.          if(running){
  162.              return;
  163.          }
  164.          init();
  166.          timer = setInterval(rotate,speed);
  167.      }
  168.  }
  170.  function clearTimer(){
  171.      clearInterval(timer);
  172.      timer = null;
  173.  }
  175.  function getPointOnCanvas(canvas, x, y) {
  177.      var bbox =canvas.getBoundingClientRect();
  179.      return { x:x- bbox.left *(canvas.width / bbox.width),
  181.              y:y - bbox.top  * (canvas.height / bbox.height)
  183.              };
  185.  }
  187.  setup();
  189.  canvas.addEventListener("mousedown",mouseDown_Start,false);
  190.  </script>
  191.  </body>
  192.  </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. 自顶向下理解Java集合框架（三）Map接口

    Map基本概念 数据结构中Map是一种重要的形式.Map接口定义的是查询表,或称查找表,其用于储存所谓的键/值对(key-value pair),其中key是映射表的索引. JDK结构中还存在实现Ma ...

  2. 爆料！如何在Visual Studio 2017上体验五星级云服务

    2017 年 3 月初,号称宇宙最强 IDE 之一的 Visual Studio 发布了最新的 2017 版本,遥想自己使用 VC++ 6.0 的当年,看着现在已然稀疏的头发,真是一入 IT 似海深, ...

  3. python3线程介绍01（如何启动和调用线程）

    #!/usr/bin/env python# -*- coding:utf-8 -*- import osimport time,randomimport threading # 1-进程说明# 进程 ...

  4. IOS 封装View的fram（X Y W H ）

    @interface UIView (Extension) @property (nonatomic, assign) CGFloat x; @property (nonatomic, assign) ...

  5. 【BZOJ3622】已经没有什么好害怕的了（动态规划+广义容斥）

    点此看题面 大致题意: 有\(n\)个糖果和\(n\)个药片,各有自己的能量.将其两两配对,求糖果比药片能量大的组数恰好比药片比糖果能量大的组数多\(k\)组的方案数. 什么是广义容斥(二项式反演) ...

  6. 使用 NetBackup 命令创建 Hyper-V 策略（命令创建其他策略也是如此）

    Veritas NetBackup™ for Hyper-V 管理指南 Product(s): NetBackup (8.1) 使用 NetBackup 命令创建 Hyper-V 策略 本主题介绍如何 ...

  7. 【造轮子】开发vue组件库MeowMeowUI

    项目示例 github ​ 1. 创建项目 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue in ...

  8. 第十五章 函数————函数的递归、生成器send 、匿名函数

    1.生成器send方法 send的工作原理 1.send发生信息给当前停止的yield 2.再去调用__next__()方法,生成器接着往下指向,返回下一个yield值并停止 例: persons=[ ...

  9. hadoop分类输出

    import org.apache.hadoop.io.Text; import java.io.IOException;import java.util.Iterator;import java.u ...

  10. 网际协议 IP

    网际协议 网际协议(internet  protocol),简称IP; 概念:TCP/IP网络体系结构中网际层的协议.用以提供无连接的数据服务. 1.IP地址的概念及组成 概念:IP地址就是用来唯一标 ...