效果展示：

canvas绘制幸运大转盘
源码展示：

<style>
        body{
            text-align: center;
        }
        canvas {
            /*border: 1px solid #999;*/
            /*margin:auto;*/
            transition:all 6s;
        }
        .container{
            width: 500px;
            height: 400px;
            position: relative;
           /*border:1px solid #999;*/
            /*text-align: center;*/
            margin:0 auto 100px;

        }
        img{
            position: absolute;
            left:50%;
            top:50%;
            transform-origin: 0 50%;
            transform:translate(2px,-25px) rotate(-90deg);
        }
    </style>
</head>
<body>
<div class="container">
    <canvas width="500" height="400"></canvas>
    <img src="img/jt.png" width="150" alt="">
</div>
<button>开始抽奖</button>
<script>
    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");
    var stuList = ["一等奖","二等奖","三等奖","四等奖","特等奖","参与奖","谢谢","再来一次","一等奖","二等奖","三等奖","四等奖","特等奖","参与奖","谢谢","再来一次"];
    /*
    * 1、 绘制出转盘 以stuList为数据 将其添加到转盘当中  平均每个一份 颜色随机
    * 2、
    * */
    function randNum(min,max){
        return parseInt(Math.random()*(max-min+1)+min);
    }
    function randColor(min,max){
        var r = randNum(min,max);
        var g = randNum(min,max);
        var b = randNum(min,max);
        return "rgb("+r+","+g+","+b+")";
              /*  `rgb(${r},${g},${b})`*/
    }
    //console.log(randColor(180,230));
    ctx.translate(250,200); //将圆心位置移动到canvas的中心
    // 将圆盘0的位置 转到箭头指向的地方
    ctx.rotate(Math.PI/180*-(90+360/stuList.length));       
    /*绘制出所有的小扇形*/
    for(var i=0;i<stuList.length;i++){
        ctx.rotate(Math.PI/180*360/stuList.length); //
        ctx.beginPath();

        ctx.arc(0,0,180,0,Math.PI/180*(360/stuList.length));
        ctx.lineTo(0,0);
        ctx.fillStyle = randColor(50,200);
        ctx.fill();

        var txt = stuList[i];
        ctx.fillStyle = "#333";
        ctx.font = "20px 'Microsoft YaHei'";
        ctx.fillText(txt,100,30);
    }
   var btn = document.querySelector("button");
    btn.onclick = function(){
      //点击添加过渡
        canvas.style.transition = "all 6s"; 
      //随机一个数字 
        var num = randNum(0,1000)+1000;          
     //添加到canvas 使其旋转
        canvas.style.transform = "rotate("+-num+"deg)";   
     //计算 现在指向是谁
        var student = parseInt(num%360/(360/stuList.length));
  

        console.log(student)

        /*一次性定时器  也叫延时器*/
        setTimeout(function(){
            alert("恭喜您获得"+stuList[student]);
//6.5s后转会原来的位置 但是 不可以有过渡效果
            canvas.style.transition = "none";                   
            canvas.style.transform = "rotate(0deg)";
        },6500)
    }
</script>
canvas绘制幸运大转盘

效果展示：

源码展示：

相关推荐
