使用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. Java Knowledge series 5

    Interface from user, not from implementor.(DIP) Interface-Oriented Programming. Interface or Abstrac ...

  2. 【起航计划 029】2015 起航计划 Android APIDemo的魔鬼步伐 28 App->Preferences->Default Values 偏好默认值

    DefaultValues 介绍了如何在XML中定义Preference的缺省值. <CheckBoxPreference android:key="default_checkbox& ...

  3. 【起航计划 004】2015 起航计划 Android APIDemo的魔鬼步伐 03 App->Activity->Animation Activity跳转动画 R.anim.×× overridePendingTransition ActivityOptions类

    App->Activity->Animation示例用于演示不同Activity切换时动态效果. android 5.0例子中定义了6种动画效果: 渐变Fade In 缩放Zoom In ...

  4. Razor 语法糖常规用法

    1.隐匿代码表达式 例: @model.name 会将表达式的值计算并写入到响应中,输入时采用html编码方式 2.显示表达式 例:@(model.name)会将输入@model.name字符串 3. ...

  5. 进一步了解this和super

    知乎上看到一问题很好,拿了与大家分享,原地址:https://www.zhihu.com/question/31548104. 问: JAVA 中this 和super与覆写冲突的问题? 实例一: 输 ...

  6. 关于java中的hashcode和equals方法原理

    关于java中的hashcode和equals方法原理 1.介绍 java编程思想和很多资料都会对自定义javabean要求必须重写hashcode和equals方法,但并没有清晰给出为何重写此两个方 ...

  7. 笨办法学Python（三十）

    习题 30: Else 和 If 前一习题中你写了一些 “if 语句(if-statements)”,并且试图猜出它们是什么,以及实现的是什么功能.在你继续学习之前,我给你解释一下上一节的加分习题的答 ...

  8. 【微软大法好】VS Tools for AI全攻略（4）——选择适合自己的虚拟机

    当我们选择好了自己的虚拟机后,也许效果不尽如人意.就比如我,发现代码在训练一段时间之后,CPU的使用率会下降. 这个时候我们就要开始考虑,是不是我们选择的虚拟机不是适合自己的型号. Azure的虚拟机 ...

  9. mysql：数据库保存时间的类型——int和datetime的区别

    我们都知道,时间保存在数据库中,可以选择使用两种类型,一种是int,一种是datetime 那么,它们两个有什么区别呢?要怎么用呢? 现在和小仓鼠一起来探讨一下 1.int和datetime的使用区别 ...

  10. ListView、DataGrid 不显示列标题

    <!--ListView不显示列标题--> <Style TargetType="{x:Type GridViewColumnHeader}"> <S ...