HTML5 Canvas圆盘抽奖应用

最新推荐文章于 2024-05-28 08:19:38 发布

严芷云

最新推荐文章于 2024-05-28 08:19:38 发布

阅读量1k

点赞数 2

分类专栏：无聊瞎鼓捣 Html5 JavaScript 文章标签： canvas

本文链接：https://blog.csdn.net/SWSHBON/article/details/51095371

版权

无意之间留意到这个网站：http://www.html5tricks.com
在里面看到了一个转盘抽奖觉得不错就把源码荡了下来自己鼓捣了下按自己的理解加了一点点东西（我的资源里面也有上传）

直接上代码
主要需要修改的就是 main.js 里面的东西也是呈现数据的关键部分

$(document).ready(function () {
   
    //旋转角度
    var angles;
    //可抽奖次数
    //可以根据数据库里面你所存在的积分数做出判断抽奖次数（ajax+Httphandler）
    var clickNum = 5;
    //旋转次数
    var rotNum = 0;
    //中奖公告
    var notice = null;
    //转盘初始化
    var color = ["#626262", "#787878", "rgba(0,0,0,0.5)", "#DCC722", "white", "#FF4350"];
    //当然这里可以考虑从数据库获取
    var info = ["谢谢参与", "1000", "10", "500", "100", "4999", "1", "20", "3", "10", "5", "1"];
//对于你的 角度 自己拼接空格 已达到合适的效果
    var info1 = [' 再接再厉', ' 元', ' 元', ' 淘金币', ' 元', ' 淘金币', ' 元', ' 淘金币', ' 瓶可乐', ' 个鸡蛋', ' Q币', ' 金条']
    canvasRun();


    $('#tupBtn').bind('click', function () {
   
        if (clickNum >= 1) {
            //可抽奖次数减一
            clickNum = clickNum - 1;
            //转盘旋转
            runCup();
            //转盘旋转过程“开始抽奖”按钮无法点击
            $('#tupBtn').attr("disabled", true);
            //旋转次数加一
            rotNum = rotNum + 1;
            //“开始抽奖”按钮无法点击恢复点击
            setTimeout(function () {
   
               // alert(notice);此处的notice可以根据空格来分割 具体要求后台处理               
                $.ajax({