其他分享
首页 > 其他分享> > 转盘代码，自己搞了一个

转盘代码，自己搞了一个

作者：互联网

 

 

<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style>

    </style>
    <script>
        var zhuanpanR = 200;//转盘半径
        var info = [11,22,33,44,55,66,77,88]
        var color = ['#78a355','#FF9966','#66CCCC','#99CCFF','#009999','#99CCFF','#99CCCC','#FFCCCC']
        var radio = 0.95;//旋转速度衰减系数，影响旋转时间
        var splitNum = info.length;

        var t = null;
        var ms = 30;//每次定时转动的角度，如30度
        var fixed_ms = 30;//每次定时转动的角度，如30度
        var total = 720;//总转度数
        window.onload = function(){
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            ctx.translate(zhuanpanR, zhuanpanR);//设置画布中心，旋转时是按中心点为基础来旋转的，默认(0,0)
            var initDu = 360/splitNum/2;
            ctx.rotate(initDu*Math.PI/180);//旋转角度,先转半个分割扇形，让竖向中心分割线能平分小扇形
            initZhuanpan(8,0);
        }

        /**
         * @param splitNum 拆分扇形份数
         * */
        function initZhuanpan(splitNum, du){
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            ctx.rotate(du*Math.PI/180);//旋转角度
            ctx.fillStyle="#FF0000";

            //画圆和分割线
            var step = Math.PI * 2 / splitNum;//一个圆弧对应的弧度
            for (var i = 0; i < splitNum; i++) {
                ctx.save();
                ctx.beginPath();
                ctx.moveTo(0, 0);
                ctx.arc(0, 0, 200, i*step,(i+1)*step);
                ctx.closePath();
                ctx.fillStyle = color[i];//getRandomColor();
                ctx.fill();
                ctx.restore();
            }

            //画文字
            for ( var i = 0; i < splitNum; i++) {
                ctx.save();//调用save()时，将记录当前的绘图状态，并压入一个堆栈中
                ctx.beginPath();
                ctx.fillStyle="#000";
                ctx.font="15px 微软雅黑";
                ctx.textAlign="center";
                ctx.textBaseline="middle";
                ctx.rotate(i*step+step/2);
                ctx.fillText(info[i],100,0)
                ctx.restore(); //调用restore()方法时，就会把上一次记录的绘图状态从堆栈中弹出。(出栈的次数不能多于入栈的次数，故程序中restore()调用次数不应多余save())
            }

        }
        //随机颜色,暂不用
        function getRandomColor() {
            var r = parseInt(Math.random() * 256);
            var g = parseInt(Math.random() * 256);
            var b = parseInt(Math.random() * 256);
            return 'rgb(' + r + ',' + g + ',' + b + ')';
        }

        function start() {
            //避免快速重复点击
            if(t){
                return false;
            }
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");

            //已转动的角度
            var angle = 0;
            t = setInterval(function(){
                angle +=ms;
//                console.log("angle="+angle);
                //还有600度的时候开始按0.95衰减，转动角度最低按每30ms转2度
                if(total-angle <=600){
                    ms *= radio;
                    if(ms<=2){
                        ms = 2;
                    }
                    if(total-angle <=1){
                        clearInterval(t);
                        var departDu = 360/splitNum;
                        var pos = Math.ceil((total) / departDu);
                        var a = Math.ceil(pos % splitNum);
                        var newA = a + 5;//计算12点方向所属区域文本扇形序号

                        var res = info[newA];
                        document.getElementById("result").innerHTML = res;
                        ms=30;//恢复初始值值
                        t = null;
                    }
                }
                ctx.save();
                initZhuanpan(splitNum,angle);
                ctx.restore();
            },30);
        }


    </script>
</head>

<body style="">
<div style="margin:100px auto;width:400px;">
    结果：<div id="result">22222</div>
    <canvas id="myCanvas" width="400" height="400" style="border:1px solid #999999;align:center"></canvas>
    <button id="btn" style="margin-top:20px;" onclick="start()">抽奖</button>
</div>
</body>
</html>

 

标签：canvas,splitNum,代码,ctx,自己,step,Math,var,转盘
来源： https://www.cnblogs.com/xiaoliu66007/p/14496728.html