原生h5 canvas实现转盘抽奖

作者: huanghaodong | 来源:发表于2020-03-18 17:06 被阅读0次

原生h5 canvas实现转盘抽奖
canvas实现转盘抽奖
css 如何“画”一个抽奖转盘
canvas大转盘
H5 Canvas抽奖大转盘代码实现及总结
H5抽奖转盘
iOS动画--转盘动画
JS实现抽奖转盘
学习资料 - 收藏集 - 掘金
Android超简单实现九宫格抽奖

image.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>转盘抽奖</title>
<style type="text/css">
.container{
    width: 400px;
    height: 400px;
    border: 1px solid black;
    position: relative;
}
canvas {
}
#img{
    position: absolute;
    width: 40px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>
</head>
<body>
    <div class="container">
        <canvas id="tutorial" width="400" height="400"></canvas>
        <img src="./start.png" id="img">
    </div>
<script type="text/javascript">
function Draw(ctx, arr){
    // arr = [{color: 'red',name: '1'},{color: 'blue',name: '2'},{color: 'green',name: '3'},{color: 'black',name: '4'}]
    //初始化转盘
    Draw.prototype.init = function(angleTo){
        ctx.clearRect(0,0, 400, 400);
        ctx.save();
        ctx.translate(200, 200)
        angleTo = angleTo || 0;
        //外圈
        ctx.arc(0, 0, 100, 0, 2 * Math.PI)
        ctx.strokeStyle = 'red'
        ctx.lineWidth = 20
        ctx.stroke()
        //内圈
        ctx.beginPath()
        ctx.arc(0, 0, 85, 0, 2 * Math.PI)
        ctx.strokeStyle = 'pink'
        ctx.lineWidth = 10
        ctx.stroke()
        // 旋转画布
       ctx.rotate(angleTo * Math.PI / 180);
       //扇形
       var length = arr.length
        var eachAngle = Math.PI / 180 * (360 / length)
        var startAngle = 2 * Math.PI / 360 * (-90);
        var endAngle = 2 * Math.PI / 360 * (-90) + eachAngle;
        for(var i=0;i<arr.length;i++){
            ctx.beginPath()
            ctx.moveTo(0,0);
            ctx.arc(0, 0, 80, startAngle, endAngle)
            ctx.fillStyle = arr[i].color
            ctx.fill()
            ctx.closePath()
            startAngle = endAngle
            endAngle += eachAngle
        }
        //文字
        startAngle = eachAngle / 2;
        ctx.beginPath()

        for(var i=0;i<arr.length;i++){
            ctx.save();
            ctx.rotate(startAngle);
            ctx.fillStyle = 'white'
            ctx.textAlign = "center";
            ctx.fillText(arr[i].name, 0, -30)
            startAngle += eachAngle;
            ctx.restore();
        }
        ctx.restore();
    }
    //转盘抽奖
    Draw.prototype.lottery = function(angel, callback){
        angel = angel || 0;
        angel = 360-angel;
        angel += 1440;
        // 基值（减速）
        var baseStep = 50;
        // 起始滚动速度
        var baseSpeed =1;
        // 步长
        var count = 1;
        var _this = this;
        var timer = setInterval(function () {
            _this.init(count);
            if (count == angel) {
                clearInterval(timer);
                if (typeof callback == "function") {
                    callback();
                }
            }
            count = count + baseStep * (((angel - count) / angel) > baseSpeed ? baseSpeed : ((angel - count) / angel))+0.1;
            if (angel - count < 0.5) {
                count = angel;
            }
        }, 25);
    }
}
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext("2d");
//奖品列表
var tempArr = [{color: 'red',name: '1'},{color: 'blue',name: '2'},{color: 'green',name: '3'},{color: 'black',name: '4'},{color: 'yellow',name: '5'}]
var draw = new Draw(ctx, tempArr)
draw.init()
var btn = document.getElementById('img')
var isLotterying = false;
btn.onclick = function(){
    if(isLotterying) return;
    isLotterying = true
    var angel = 360/tempArr.length
    var index = tempArr.findIndex(function(v){return v.name === '2'}) //奖品在列表中的索引
    draw.lottery(angel * index + angel/2, function(){
        isLotterying = false
    })
}
</script>
</body>
</html>