canvas转盘-拯救选择困难
生活随笔
收集整理的這篇文章主要介紹了
canvas转盘-拯救选择困难
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
轉盤-拯救選擇困難
- 效果圖
- 簡介
- 代碼
效果圖
簡介
每到飯點就糾結吃什么，不如直接roll點。
注意：選項不宜過多，雖然對功能沒影響，不過文本會顯示不開。另外可以將文件傳到手機隨身攜帶，沒有過多的腳本，大部分瀏覽器兼容
代碼
<!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>總結
以上是生活随笔為你收集整理的canvas转盘-拯救选择困难的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： git rebase用法_Git：Clo
- 下一篇： python 颜色_如何使用python