使用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. Azure进阶攻略 | 数据库上云：零停机、自动化

    小明最近挺忙,刚刚在外地找了个新工作,正在忙着搬家.多年积攒的家当很多,根本不能潇洒地「说走就走」,于是他联系了搬家公司.专业的就是不一样,不费什么事,就把所有东西打包.运输.拆包到位了.抵达新城市的 ...

  2. SQL varchar转float实现数字比较

    select * from table where cast('经纬度' as float ) < 90

  3. Js parsetInt() 字符串转换,只能转换字符串,数字开头的才会返回数值,否则为NaN,空字符串也返回NaN

    alert(parseInt('456lee')); //456,返回正数部分 alert(parseInt('lee456lee')); //NaN alert(parseInt('lee456le ...

  4. mysql索引和正确使用方式

    一.索引类型 B树索引:大部分都是,因此B树的特性限制了索引如何使用:必须看看索引的正确使用限制(含组合索引的限制)http://blog.csdn.net/lovemdx/article/detai ...

  5. Uva 10791 最小公倍数的最小和 唯一分解定理

    题目链接:https://vjudge.net/contest/156903#problem/C 题意:给一个数 n ,求至少 2个正整数,使得他们的最小公倍数为 n ,而且这些数之和最小. 分析: ...

  6. react里面Fragments的使用

    关于react Fragments,React 中一个常见模式是为一个组件返回多个元素.Fragments 可以让你聚合一个子元素列表,并且不在DOM中增加额外节点. render() { retur ...

  7. redis list类型

  8. Makefile 简述

    定义 Linux 环境下的程序员如果不会使用GNU make来构建和管理自己的工程,应该不能算是一个合格的专业程序员,至少不能称得上是 Unix程序员.在 Linux(unix )环境下使用GNU 的 ...

  9. rcnn spp_net hcp

    rcnn开创性工作,但是计算时间太长,重复计算太大. spp_net将重复计算避免了. hcp是yan shuicheng那边的,是用bing生成regions,然后用normalized cut将这 ...

  10. Ansible工作架构和原理

    特性 模块块化调用持定的模块,完成持定任务 有Paramiko,PyYAML,Jinja2(模板语言)三个关键模块 支持自定义模块 基于Python语法头现 部署简单,基于python和SSH(默认已 ...