年底没啥，抽空学习了canvas，写了个html5抽奖的代码，造了个轮子，有用的童鞋可以拿走。

其中，canvas.onclick触发抽奖行为，概率可以在core.lottery()函数上添加，美化也可以替换上图，嘿嘿，给大家做个事例，如有bug，请以评论的形式提出。

 代码如下 复制代码

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5圆形抽奖 - zkeyword.com</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #ddd"></canvas>
</body>
<script>
var lottery = (function(){

var canvas     = document.getElementById('canvas'),
            ctx        = canvas.getContext('2d'),
            width      = 400,
            height     = 400,
            x          = 200,
            y          = 200,
            color      = ['#a00','#0a0','#00a','#aa0','#a16','#0aa','#a5a','#f31','#784','#a43','#34a','#786'],
            deg        = Math.PI / 180,
            isClick    = true,
            startTimer = null,
            shopTimer  = null,
            i          = 0,
            len        = 12
            speed      = 340;

canvas.width  = width;
 canvas.height = height;

var core = {
  init: function(i){
   core.bg();
   core.proint(i);
   core.btn();
  },

bg: function(){
   var i = 0;

ctx.save();
   for(; i < len; i++){
    ctx.beginPath();
    ctx.fillStyle = color[i];
    ctx.moveTo(x, y);
    ctx.arc(x, y, 180, deg * i * 30,  deg * (i+1) * 30);
    ctx.fill();
    ctx.closePath();
   }
   ctx.restore();
  },

proint: function(i){
   ctx.save();
   ctx.beginPath();
   ctx.fillStyle = '#333';
   ctx.moveTo(x, y);
   ctx.arc(x, y, 180, deg * i * 30,  deg * (i+1) * 30);
   ctx.fill();
   ctx.closePath();
   ctx.restore();
  },

btn: function(){
   ctx.beginPath();
   ctx.fillStyle = '#555';
   ctx.arc(x, y, 50, 0, Math.PI*2);
   ctx.fill();
   ctx.closePath();
   ctx.restore();
  },www.111cn.net

clear: function(){
   ctx.clearRect(0, 0, 250, 250);
  },

/*开始加速*/
  start: function(){
   i          = (i === 12) ? 0 : i;
   speed     = (speed !== 100) ? (speed - 20) : 100;
   startTimer = setTimeout(function(){
                                        core.start();
                                     }, speed);

core.clear();
   core.init(i);
   i++;
   isClick = false;
  },

/*匀速运动，指定指针*/
  move: function(h){
   var val  = 12 - Math.abs(h + 1 - i);

if( startTimer ) clearTimeout(startTimer);
   if( val !== 12 ){
    i = (i === 12) ? 0 : i;
    var timer = setTimeout(function(){
                                                core.move(h);
                                     }, speed);

core.clear();
    core.init(i);
    i++;
   }else{
    core.stop();
   }
  },

/*停止减速*/
  stop: function(){
   if( speed !== 340 ){
    i = (i === 12) ? 0 : i;
    speed += 20;
    shopTimer = setTimeout(function(){
                                                core.stop();
         }, speed);

core.clear();
    core.init(i);
    i++;
   }else{
    if( shopTimer ) clearTimeout(shopTimer);
    core.callback(i);
    i = 0;
    isClick = true;
   }
  },

callback: function(i){
   console.log(i,'中奖了')
  },

random: function(min, max){
   return Math.floor(min + Math.random()*(max-min));
  },

/*抽奖，概率算法*/
  lottery: function(){
   var s = core.random(1, 10),
       y = core.random(1, 1000);

if( s === 1 ){
       core.move(1);
   }else if( y === 1 ){
                            core.move(1);
   }else{
       core.move(0);
   }
   console.log(s, y)
  }
 };

core.init(0);

canvas.onclick = function(e){
  if( isClick ){
   core.start();
   setTimeout(function(){
       core.lottery();
       }, 5000);
  }
  //else if( !isClick && speed === 100 ){
  //}
 }

})();
</script>
</html>
 
你可能感兴趣的文章

html5 canvas 圆形抽奖的实例的更多相关文章

  1. HTML5 Canvas圆盘抽奖应用（适用于Vue项目）

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  2. HTML5 Canvas图片操作简单实例1

    1.加载显示图片 <canvas id="canvasOne" class="myCanvas" width="500" height ...

  3. HTML5 canvas 圆盘抽奖

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

  4. html5 canvas 圆形径向渐变

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. HTML5 Canvas Text文本居中实例

    1.代码: <canvas width="700" height="300" id="canvasOne" class="c ...

  6. HTML5 Canvas显示本地图片实例1、Canvas预览图片实例1

    1.前台代码: <input id="fileOne" type="file" /> <canvas id="canvasOne&q ...

  7. canvas转盘抽奖

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...

  8. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  9. 16个非常有趣的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

随机推荐

  1. shiro安全框架

    原文:http://blog.csdn.net/boonya/article/details/8233303 可能大家早先会见过 J-security,这个是 Shiro 的前身.在 2009 年 3 ...

  2. Oracle数据库文件恢复与备份思路

    怎样才能对Oracle数据库进行备份?如何才能对删除的数据再进行恢复?这是困扰着很多人的问题.大家都知道,任何数据库在长期使用过程中,都会存在一定的安全隐患.对于数据库管理员来说不能仅寄希望于计算机操 ...

  3. const 成员方法

    1.使用场景 代码提供者告诉客户(代码使用者),这个方法不会修改对象的内容,请客户放心使用. 2.代码提供者,尝试在const成员方法中修改对象内容,编译报错.在成员方法中,this是const 指针 ...

  4. BZOJ 3170: [Tjoi 2013]松鼠聚会 切比雪夫距离

    3170: [Tjoi 2013]松鼠聚会 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/p ...

  5. 关于java的JIT知识

    1.JIT的工作原理图  工作原理 当JIT编译启用时(默认是启用的),JVM读入.class文件解释后,将其发给JIT编译器.JIT编译器将字节码编译成本机机器代码. 通常javac将程序源码编译, ...

  6. Effective C++ Item 29 为”异常安全”而努力是值得的

    本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie 经验:异常安全函数即使发生异常也不会泄漏资源或同意不论什么数据结构败坏.这种函数区分为三种 ...

  7. Swift常用语法示例代码（二）

    此篇文章整理自我以前学习Swift时的一些练习代码,其存在的意义多是可以通过看示例代码更快地回忆Swift的主要语法. 如果你想系统学习Swift或者是Swift的初学者请绕路,感谢Github上Th ...

  8. iOS开发——网络编程Swift篇&（三）同步Get方式

    同步Get方式 // MARK: - 同步Get方式 func synchronousGet() { //创建NSURL对象 var url:NSURL! = NSURL(string: " ...

  9. Spark on Yarn遇到的问题及解决思路

    原文:http://www.aboutyun.com/thread-9425-1-1.html 问题导读1.Connection Refused可能原因是什么?2.如何判断内存溢出,该如何解决?扩展: ...

  10. Redis 数据备份与恢复

    Redis SAVE 命令用于创建当前数据库的备份. 语法 redis Save 命令基本语法如下: redis 127.0.0.1:6379> SAVE 实例 redis 127.0.0.1: ...