使用canvas做一个抽奖转盘

最新推荐文章于 2024-09-28 13:43:35 发布

jacoby_fire

最新推荐文章于 2024-09-28 13:43:35 发布

阅读量3.9k

点赞数 2

分类专栏：工作总结文章标签： canvas 抽奖转盘

本文链接：https://blog.csdn.net/jacoby_fire/article/details/79074531

版权

工作总结专栏收录该内容

25 篇文章 1 订阅

订阅专栏

最近，公司在每周五下午会有一次个人分享沙龙。上周我自愿参加了，因为每周都是由当前主讲人来决定下次的主讲人，于是就有做一个抽奖页面的想法，话不多说，先看效果。

这里写图片描述

点击抽奖之后，转盘的速度会由慢到快，然后由快到慢再停止，整个过程持续时间是3s,下面是代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
    <style>
        .text-center {
            text-align: center;
        }

        .title {
            color: blue;
        }
        .div canvas{
            position: absolute;
            top:0;left:0;
        }
        button{
            width:200px;height:60px;
            color:red;
            font-weight: bold;
            font-size: 30px;
        }
    </style>
</head>
<body class="text-center">
<!--<h2 class="text-center title">抽奖</h2>-->
<div style="width:1200px;height:1200px;margin:50px auto;zoom: 0.5;position: relative;" class="text-center div">
    <!--转盘层的canvas-->
    <canvas id="canvas"></canvas>
    <!--指针所在的canvas-->
    <canvas id="canvas2"></canvas>
</div>
<button onclick="go()">开始抽奖</button>
</body>


<script>
    var colors = ['#33ACB5', '#DF5C5D', '#B4D966', '#5450B3', '#FFD457', '#3A97EA', '#FAA167', '#63CA97', '#9A50B3'];
    //定义人名和对应的颜色
    var data = [
        {name: '科比', color: colors[0]},
        {name: '韦德', color: colors[1]},
        {name: '保罗', color: colors[2]},
        {name: '卡特', color: colors[3]},
        {name: '詹姆斯', color: colors[4]},
        {name: '库里', color: colors[5]},
        {name: '哈登', color: colors[6]},
        {name: '乔治', color: colors[7]},
        {name: '安东尼', color: colors[8]},
        {name: '威少', color: colors[6]},
        {name: '罗斯', color: colors[5]}
    ];

    var canvas = document.getElementById('canvas');//转盘所在画布
    var canvas2 = document.getElementById('canvas2'); //指针所在画布
    canvas.width = canvas2.width = 1200;
    canvas.height = canvas2.height = 1200;

    var sector = canvas.getContext("2d"); //每一个区域块
    var hand = canvas2.getContext("2d");  //指针

    var w = canvas.width;
    var h = canvas.height;

    paintName(data);

    //画指针
    hand.fillStyle = "#fff";
    hand.fillRect(600-5, 50, 10, 600);
    hand.arc(w/2,h/2,30,0,Math.PI*2);
    hand.fill();

    //绘制转盘
    function paintName(data) {
        var len = data.length;
        var angle = Math.PI * 2 / len;

        for (var i = 0; i < data.length; i++) {
            var item = data[i];

            sector.beginPath();
            sector.moveTo(w / 2, h / 2);
            sector.lineTo(w - 3, h / 2);
            sector.arc(w / 2, h / 2, h / 2 - 3, 0, angle);
            sector.lineTo(w / 2, h / 2);
            sector.fillStyle = item.color;
            sector.fill();

            sector.translate(600, 600); // 设置原点为画布中心
            sector.rotate(angle);
            sector.translate(-600, -600); // 恢复画布中心到（0，0）

            sector.save();

            //绘制文字
            sector.translate(900, 600);
            sector.font = "100px Georgia";
            sector.fillStyle = "#fff";
            sector.fillText(item.name, -80, -60);
            sector.translate(-1000, -600);
            sector.restore();
        }
    }

    //点击click的时候调用这个方法
    //我这里有定义了加速度a0,他是随机生成的，所以每次点击开始抽奖的时候，转动的加速度是随机的，这保证了抽奖的随机性
    function go() {
        var time = 3000;
        var a0 = (Math.random()+5) / 100;
        var clock = 20;
        var interval = setInterval(function () {
            var a = time >= 1500 ? a0:-a0;
            var v = time>=1500 ? a * (3000-time) : a0*1500 + a * (1500-time);
            sector.translate(600,600);
            sector.rotate(Math.PI/180 * v);
            sector.translate(-600,-600);
            sector.clearRect(0,0,1200,1200);
            paintName(data);
            time -= clock;

            if(time == 0){
                window.clearInterval(interval);
            }
        },clock)
    }
</script>
</html>