使用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. Mac 下显示隐藏文件或文件夹

    Mac 操作系统 隐藏显示文件 显示:defaults write com.apple.finder AppleShowAllFiles -bool true 隐藏:defaults write co ...

  2. Linux目录配置——Linux目录配置标准：FHS

    事实上,FHS针对目录树架构仅定义出三层目录下应该放置哪些数据,分别是下面三个目录: 一./(根目录):与开机系统有关 根目录(/)所在分区应该越小越好,且应用程序所安装的软件最好不要与根目录放在同一 ...

  3. SqlServer-Cursor讲解一

    原创文章,转载必需注明出处:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/introduce-for-sqlserver-s-cu ...

  4. 关于HTML5，最牛逼的10本书！

    关于HTML5,最牛逼的10本书! 关于HTML5,最牛逼的10本书.rar HTML5+CSS3从入门到精通 李东博 著 推荐指数:★★★☆ 简介:本书通过基础知识+中小实例+综合案例的方式,讲述了 ...

  5. User Agent字符串列表

    User Agent字符串列表 --之心 User Agent中文名为用户代理,是Http协议中的一部分,属于头域的组成部分,User Agent也简称UA.它是一个特殊字符串头,是一种向访问网站提供 ...

  6. 使用Excel消费C4C的OData service

    步骤比较简单, 打开Excel的标签Data->From Other Sources->From OData Data Feed: 输入如下url: https://.c4c.saphyb ...

  7. POJ-2377 Bad Cowtractors---最大生成树

    题目链接: https://vjudge.net/problem/POJ-2377 题目大意: 给一个图,求最大生成树权值,如果不连通输出-1 思路: kruskal算法变形,sort按边从大到小排序 ...

  8. .nettiers和SQLite搅合到一块之后遇到的问题

    第一步 用SQLiteStudio生成一个新的数据库,sqlitetest,新建一张表test,建立一个主键字段ID,一个字符字段Name,建立完成,留待后用. 第二步 用VS2010建立一个sqli ...

  9. Python -函数的参数定义

    一.函数的参数有四种,位置参数.默认参数.可变参数和关键字参数 def func(x, y=0, *arg, **args): '''x为位置参数 y有默认值 *arg为可变参数 **args为关键字 ...

  10. 使用jdk进行数据迁移(sqlite迁移mysql)

    直接粘贴代码 注意:rewriteBatchedStatements=true(加快连接速度) package com.wbg; import org.omg.Messaging.SYNC_WITH_ ...