canvas转盘-拯救选择困难

最新推荐文章于 2024-01-23 18:54:04 发布

御形封灵

最新推荐文章于 2024-01-23 18:54:04 发布

阅读量171

点赞数

分类专栏：写着玩（前端）文章标签： html5 javascript css3 css

本文链接：https://blog.csdn.net/weixin_43954962/article/details/111605202

版权

写着玩（前端）专栏收录该内容

23 篇文章 0 订阅

订阅专栏

转盘-拯救选择困难

效果图

在这里插入图片描述

简介

每到饭点就纠结吃什么，不如直接roll点。

在词条框中输入选项，选项用逗号（中英都可）隔开。
点击设置词条，会根据词条（没有输入则获取代码中的默认词条）绘制等比例扇形图。
点击start 开始旋转，根据旋转角度计算结果，旋转角度以及旋转时间是完全随机的，有时会很快有时会很慢。

注意：选项不宜过多，虽然对功能没影响，不过文本会显示不开。另外可以将文件传到手机随身携带，没有过多的脚本，大部分浏览器兼容

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转盘</title>
    <style>
        .base{
            width: 400px;
            margin: 20px auto;
        }
        .wrap {
            position: relative;
            width: 400px;
            height: 400px;
        }

        #cv {
            position: relative;
            border-radius: 100%;
            border: 1px solid #f4f4f4;
            box-shadow: 8px 5px 10px 2px #ddd;
        }

        .pointer {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }

        .pointer-center,
        .pointer-line {
            position: absolute;
            border: 1px solid #ddd;
            background: #fff;
        }

        .pointer-center {
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 20px;
            height: 20px;
            border-radius: 100%;
        }

        .pointer-line {
            left: 0;
            right: 0;
            top: calc(33% + 17px);
            bottom: 0;
            margin: auto;
            width: 8px;
            height: 33%;
            border-radius: 0 0 4px 4px/0 0 50% 50%;
            border-top: 0;
        }

        .handle {
            display: block;
            width: auto;
            height: 30px;
            padding: 3px 10px;
            margin: 20px auto 0;
            line-height: 30px;
            font-size: 20px;
            font-weight: bold;
            color: #F44336;
            text-align: center;
            cursor: pointer;
            border: 1px solid #D0D0D0;
            border-radius: 3px;
        }

        .handle:hover {
            color: mediumseagreen;
        }

        #custom {
            width: 400px;
            height: 100px;
            margin-top: 20px;
            border-radius: 3px;
            padding: 2px;
            outline: none;
            border: 1px solid #D0D0D0;
        }
    </style>
</head>
<body>
<div class="base">
    <div class="wrap">
        <canvas id="cv" width="400px" height="400px"></canvas>
        <div class="pointer">
            <i class="pointer-center"></i>
            <i class="pointer-line"></i>
        </div>
    </div>
    <span class="handle" id="start">start</span>
    <textarea type="text" id="custom"></textarea>
    <div class="handle" id="setting">设置词条</div>
    <div style="font-size: 14px;text-align: center">设置转盘选项，不输入则添加默认值</div>
    <div class="handle" id="see" style="height:auto">查看词条</div>
</div>
<script>
    var defaultStr = '选项1，选项2，选项3，选项4，选项5';

    var colors = ['#92dfff', '#ffb884', '#b5ff80', '#f7ff45'];

    var setting = document.getElementById('setting'),
        custom = document.getElementById('custom'),
        see = document.getElementById('see');

    setting.addEventListener('click', function () {
        render(custom.value)
    });
    
    see.addEventListener('click',function(){
    	this.innerHTML=defaultStr.split(/，|,/).join('<br>');
    });

    function render(str) {
        var itemStr = str || defaultStr;
        var items = itemStr.split(/，|,/).map(function (item) {
            return {
                label: item
            }
        });
        
        var len_items = items.length, len_colors = colors.length;
        //len_items % len_colors < len_colors 多出的items 部分从颜色盘的顺位取色避免相邻重色
        //计算开始顺位索引
        var ondex = len_items - len_items % len_colors;
        //匹配颜色
        var i;
        for (i = 0; i < ondex; i++) {
            items[i].color = colors[i % len_colors];
        }
        for (; i < items.length; i++) {
            items[i].color = colors[i % len_colors + 1];
        }
        var drawing, start, context, cx, cy;
        //创建画布
        document.querySelector('.wrap').innerHTML = document.querySelector('.wrap').innerHTML;

        drawing = document.getElementById('cv');
        start = document.getElementById('start');
        context = drawing.getContext("2d");
        cx = drawing.width / 2;
        cy = drawing.height / 2;

        //绘制
        var per = 2 * Math.PI / items.length;//各扇区角度
        var startAngle = 0.5 * Math.PI, endAngle = startAngle + per;//初始角度
        //重置中心点
        context.translate(cx, cy);
        items.forEach(function (item) {
            context.beginPath();
            context.moveTo(0, 0);//中心点
            context.lineTo(0, cy);//正方向
            context.arc(0, 0, cy, startAngle, endAngle);
            context.lineTo(0, 0);
            context.fillStyle = item.color;
            context.fill();
            context.closePath();
            //绘制文字
            context.rotate(0.5 * per);
            context.font = '400 12px Arial';
            context.textAlign = 'center';
            context.fillStyle = '#000';
            context.fillText(item.label, 0, cy * 0.8);
            //旋转画板
            context.rotate(0.5 * per);
        });
        start.addEventListener('click', function () {
            var angle, time;
            //随机旋转角度
            angle = parseInt(Math.random() * 8000);
            time = 4 + angle / 360 * 0.5;
            drawing.style = 'transform:rotate(0deg);transition:none';
            setTimeout(function () {
                drawing.style = 'transform:rotate(' + angle + 'deg);transition:transform ' + time + 's cubic-bezier(0.15, 0.72, 0.25, 1) 0s';
                //计算旋转角度相对于初始角度偏角占360度的比例
                setTimeout(function () {
                    var anglePer, rollNum,result;
                    anglePer = angle % 360 / 360;
                    //旋转过的面板数(注意是逆向旋转)
                    rollNum = Math.ceil(anglePer / (1 / len_items));
                    result = items[len_items - rollNum].label;
                    //输出结果
                    console.log(result);
                    alert(result);
                }, time * 1000)
            })
        })
    }

</script>
</body>
</html>