<!DOCTYPE html>

<html lang="zh-cn">

<head>

  <meta charset="UTF-8">

  <title>HTML5 Canvas圆盘抽奖应用DEMO演示</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

  <style>

    * {

      padding: 0px;

      margin: 0px;

      font-size: 16px;

      font-family: "Microsoft YaHei";

    }

    .xttblog_box {

      width: 300px;

      height: 300px;

      margin: 100px auto;

      position: relative;

    }

    .xttblog_box canvas {

      position: absolute;

    }

    #xttblog {

      background-color: white;

      border-radius: 100%;

    }

    #xttblog01,

    #xttblog03 {

      left: 50px;

      top: 50px;

      z-index: 30;

    }

    #xttblog02 {

      left: 75px;

      top: 75px;

      z-index: 20;

    }

    #xttblog {

      -o-transform: transform 6s;

      -ms-transform: transform 6s;

      -moz-transform: transform 6s;

      -webkit-transform: transform 6s;

      transition: transform 6s;

      -o-transform-origin: 50% 50%;

      -ms-transform-origin: 50% 50%;

      -moz-transform-origin: 50% 50%;

      -webkit-transform-origin: 50% 50%;

      transform-origin: 50% 50%;

    }

    .taoge_btn {

      width: 60px;

      height: 60px;

      left: 120px;

      top: 120px;

      border-radius: 100%;

      position: absolute;

      cursor: pointer;

      border: none;

      background: transparent;

      outline: none;

      z-index: 40;

    }

  </style>

  <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

  <script>

    $(document).ready(function () {

      //旋转角度

      var angles;

      //旋转次数

      var rotNum = 0;

      //中奖公告

      var notice = null;

      //转盘初始化各样式颜色

      var color = ["#ffefbf", "#ffbb04", "#e72c2c", "#DCC722", "#f4a005", "#cb1418"];

      // 后台获取奖品替换数据

      var info = ["1", "2", " 3", " 4", " 5", " 6"];

      canvasRun();

      $('#tupBtn').bind('click', function () {

        //转盘旋转

        runCup();

        //转盘旋转过程“开始抽奖”按钮无法点击

        $('#tupBtn').attr("disabled", true);

        //“开始抽奖”按钮无法点击恢复点击

        setTimeout(function () {

          alert('中奖拉')

          $('#tupBtn').removeAttr("disabled", true);

        }, 6000);

      });

      //转盘旋转

      function runCup() {

        var num = null

        //获取随机数0-5 取回获奖数据下标代替 此处获取获奖数据使用异步方法

        var num = parseInt(Math.random() * (5 - 0 + 0) + 0);

        // 记录旋转的次数，依次叠加旋转度数，防止往回倒转  transform属性的值必须依次增加，否则会发生倒转

        rotNum = rotNum + 1

        if(num !== null) {

          //  旋转角度 = 旋转6圈（2160度）* 已经旋转的次数 + 最少旋转的圈数（5圈）+ 每个奖品下标对应的角度

          angles = 2160 * rotNum + 1800 + 360 / info.length * (info.length - num);

        } else {

          angles = 2160 * rotNum + 1800

        }

        var degValue = 'rotate(' + angles + 'deg' + ')';

        $('#xttblog').css('transform', degValue);

        // 如果没有获取到获奖数据继续转动

        if(num === null) {

          runCup();

        }

      }

      //绘制转盘

      function canvasRun() {

        var canvas = document.getElementById('xttblog');

        var canvas01 = document.getElementById('xttblog01');

        var canvas03 = document.getElementById('xttblog03');

        var canvas02 = document.getElementById('xttblog02');

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

        var ctx1 = canvas01.getContext('2d');

        var ctx3 = canvas03.getContext('2d');

        var ctx2 = canvas02.getContext('2d');

        createCircle();

        createCirText(); // 绘制文字

        initPoint(); // 绘制指针

        //外圆

        function createCircle() {

          var startAngle = 0; //扇形的开始弧度

          var endAngle = 0; //扇形的终止弧度

          //画一个等份扇形组成的圆形

          for (var i = 0; i < info.length; i++) {

            startAngle = Math.PI * (i / (info.length / 2) - 2 / info.length);

            endAngle = startAngle + Math.PI * (1 / (info.length / 2));

            ctx.save(); // 保存备份

            ctx.beginPath(); // 绘制两条线

            ctx.arc(150, 150, 100, startAngle, endAngle, false); // 绘制圆

            ctx.lineWidth = 120;

            if (i % 2 == 0) { // 绘制颜色

              ctx.strokeStyle = color[1];

            } else {

              ctx.strokeStyle = color[0];

            }

            ctx.stroke();

            ctx.restore();

          }

        }

        //各奖项

        function createCirText() {

          ctx.textAlign = 'start';

          ctx.textBaseline = 'middle';

          ctx.fillStyle = color[3];

          var step = 2 * Math.PI / info.length;

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

            ctx.save();

            ctx.beginPath();

            ctx.translate(150, 150);

            ctx.rotate(i * step);

            ctx.font = " 20px Microsoft YaHei";

            ctx.fillStyle = color[3];

            ctx.fillText(info[i], -30, -100, 60); // 书写转盘文字

            ctx.font = " 14px Microsoft YaHei";

            ctx.closePath();

            ctx.restore();

          }

        }

        //箭头指针

        function initPoint() {

          //箭头指针

          ctx1.beginPath();

          ctx1.moveTo(100, 24);

          ctx1.lineTo(90, 62);

          ctx1.lineTo(110, 62);

          ctx1.lineTo(100, 24);

          ctx1.fillStyle = color[5]; // 指针颜色

          ctx1.fill();

          ctx1.closePath();

          //中间圆圈

          ctx2.beginPath();

          ctx2.arc(75, 75, 50, 0, Math.PI * 2, false); // 创建一个圆

          ctx2.fillStyle = color[2]; // 颜色

          ctx2.fill();

          ctx2.closePath();

          //中间小圆

          ctx3.beginPath();

          ctx3.arc(100, 100, 40, 0, Math.PI * 2, false);

          ctx3.fillStyle = color[5];

          ctx3.fill();

          ctx3.closePath();

          //小圆文字

          ctx3.font = "Bold 20px Microsoft YaHei";

          ctx3.textAlign = 'start';

          ctx3.textBaseline = 'middle';

          ctx3.fillStyle = color[4]; //抽奖文字颜色

          ctx3.beginPath();

          ctx3.fillText('开始', 80, 90, 40);

          ctx3.fillText('抽奖', 80, 110, 40);

          ctx3.fill();

          ctx3.closePath();

        }

      }

    });

  </script>

</head>

<body>

  <div class="xttblog_box">

    <canvas id="xttblog" width="300px" height="300px">抱歉！浏览器不支持。</canvas>

    <canvas id="xttblog01" width="200px" height="200px">抱歉！浏览器不支持。</canvas>

    <canvas id="xttblog03" width="200px" height="200px">抱歉！浏览器不支持。</canvas>

    <canvas id="xttblog02" width="150px" height="150px">抱歉！浏览器不支持。</canvas>

    <button id="tupBtn" class="taoge_btn"></button>

  </div>

</body>

</html>

参考其他demo : http://www.html5tricks.com/html5-canvas-choujiang.html

HTML5 Canvas圆盘抽奖应用（适用于Vue项目）的更多相关文章

  1. HTML5 canvas 圆盘抽奖

    使用html5 canvas 绘制的圆盘抽奖程序 效果图: 贴上全部代码:  1 <!DOCTYPE html> <html> <head> <meta ch ...

  2. html5 canvas 圆形抽奖的实例

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

  3. 适用于vue项目的打印插件

    此方法只适用于现代浏览器,IE10以下就别用了 // 使用时请尽量在nickTick中调用此方法 //打印 export default (refs, cb) => { let cloneN i ...

  4. 适用于vue项目的打印插件（转载）

    出处:https://www.cnblogs.com/lvyueyang/p/9847813.html // 使用时请尽量在nickTick中调用此方法 //打印 export default (re ...

  5. 基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现

    一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...

  6. HTML5 Canvas绘制转盘抽奖

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

  7. .gitignore 标准模板 -适用于SpringBoot+Vue项目 -Idea+VSCode开发

    .gitignore 标准模板 -适用于SpringBoot+Vue项目 node_modules/ target/ !.mvn/wrapper/maven-wrapper.jar ### STS # ...

  8. 基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目

    功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...

  9. vue项目中使用canvas

    canvas API 文档:https://www.canvasapi.cn/ 一.在html中使用canvas canvas 元素用于在网页上绘制图形.  在html中,使用 document.ge ...

随机推荐

  1. 房上的猫：java基础知识部分知识点

    1.Java常见的注释有哪些,语法是怎样的? 1)单行注释用//表示,编译器看到//会忽略该行//后的所文本  2)多行注释/* */表示,编译器看到/*时会搜索接下来的*/,忽略掉/* */之间的文 ...

  2. JavaScript 内存相关知识

    一.内存基本概念 1.1.生命周期 不管什么程序语言,内存生命周期基本是一致的: 分配你所需要的内存 var n = 123; // 给数值变量分配内存 var s = "azerty&qu ...

  3. K：二叉树的非递归遍历

    相关介绍:  二叉树的三种遍历方式(先序遍历,中序遍历,后序遍历)的非递归实现,虽然递归方式的实现较为简单且易于理解,但是由于递归方式的实现受其递归调用栈的深度的限制,当递归调用的深度超过限制的时候, ...

  4. 如何用css写打印样式

    打印样式 打印样式就是针对网页被打印时设置给文档的样式,由于打印时是显示在纸上,跟屏幕还是有区别的,对于有打印需求的网页往往需要设置专门的打印样式来适配页面. @media print 声明自己是打印 ...

  5. MssqlOnLinux 备份和日志【3】

    数据库恢复模式: 一 简单模式:只对数据进行备份,不备份日志. 二 完整模式:支持数据,日志备份. 三 大容量日志模式:支持数据,日志备份.适用于大规模大容量操作,用最小的方式记录大多数操作. 数据库 ...

  6. AVFoundation 框架初探究（二）

    接着第一篇总结 系列第一篇地址:AVFoundation 框架初探究(一) 在第一篇的文章中,我们总结了主要有下面几个点的知识: 1.对AVFoundation框架整体的一个认识 2.AVSpeech ...

  7. visual studio相关操作

    1.同一个解决方案下的两个项目之间怎么相互调用 在项目的“引用”上右键,添加引用,选你要引用的项目.然后在代码里就能调用引用项目里的某个类的方法了. 2.如果一个项目类型为”类库“的项目要运行,会报如 ...

  8. windows第七层负载均衡--基于IIS的ARR负载均衡

    载均衡有很多种方法,有硬件负载均衡,软件负载均衡,还可以从域名解析下手. 不过,今天只讲软件负载均衡 软件负载均衡一般分两种,从网络协议来讲(tcp/ip),主要集中在第四层和第七层进行负载均衡. 第 ...

  9. 【转】jar包和war包的介绍和区别

    JavaSE程序可以打包成Jar包(J其实可以理解为Java了),而JavaWeb程序可以打包成war包(w其实可以理解为Web了).然后把war发布到Tomcat的webapps目录下,Tomcat ...

  10. MYSQL:插入记录检查记录是否存在，存在则更新，不存在测插入记录SQL

    我们在开发数据库相关的逻辑过程中, 经常检查表中是否已经存在这样的一条记录, 如果存在则更新或者不做操作, 如果没有存在记录,则需要插入一条新的记录. 这样的逻辑固然可以通过两条sql语句完成. SE ...