canvas转盘-拯救选择困难

转盘-拯救选择困难

    • 效果图
    • 简介
    • 代码

效果图

canvas转盘-拯救选择困难_第1张图片

简介

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

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

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

代码


<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">startspan>
    <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('
'
); }); 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>

你可能感兴趣的:(写着玩(前端),html5,javascript,css3,css)