利用js做一个大转盘代码（旅游盲盒）

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>旅游盲盒转盘</title>
    <script type="text/javascript">
      var info = [
	"长城（北京）",
 	"故宫（北京）",
 	"天安门广场（北京）",
 	"颐和园（北京）",
 	"鸟巢（北京）",
 	"北京欢乐谷（北京）",
	 "十三陵（北京）",
	 "北京大观园（北京）",
	 "恭王府（北京）",
	 "天坛公园（北京）",
	 "香山公园（北京）",
	 "鼓浪屿（厦门）",
	 "厦门大学（厦门）",
	 "南普陀寺（宁波）",
	 "杭州西湖（杭州）",
	 "千岛湖（杭州）",
	 "上海外滩（上海）",
	 "东方明珠塔（上海）",
	 "朱家角古镇（上海）",
	 "南京夫子庙（南京）"
      ];
      var color = [];
      var step = 2 * Math.PI / info.length;
      var outerR = 150;
      var interR = 50;
      var beginAngle = 50;
      var radio = 0.95;
      var t = null;
      window.onload = function() {
        for (var i = 0; i < info.length; i++) {
          color.push(getColor());
        }
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        context.translate(250, 250);
        init(context);
        document.getElementById("btn").onclick = function() {
          if (t) {
            return false;
          }
          var step = beginAngle + Math.random() * info.length;
          var angle = 0;
          t = setInterval(function() {
            step *= radio;
            if (step <= 0.1) {
              clearInterval(t);
              t = null;
              var pos = Math.ceil(angle / 36);
              var res = info[info.length - pos];
              context.save();
              context.beginPath();
              context.font = "12px 微软雅黑";
              context.fillStyle = "#f00";
              context.textAlign = "center";
              context.textBaseline = "middle";
              context.fillText(res, 0, 0);
              context.restore();
            } else {
              context.clearRect( - 250, -250, 500, 500);
              angle += step;
              if (angle > 360) {
                angle -= 360;
              }
              context.save();
              context.beginPath();
              context.rotate(angle * Math.PI / 180);
              init(context);
              context.restore();
            }
          },
          30);
        };
      };
      function init(context) {
        for (var i = 0; i < info.length; i++) {
          context.save();
          context.beginPath();
          context.moveTo(0, 0);
          context.fillStyle = color[i];
          context.arc(0, 0, outerR, i * step, (i + 1) * step);
          context.fill();
          context.restore();
        }
        context.save();
        context.beginPath();
        context.fillStyle = "#fff";
        context.arc(0, 0, interR, 0, 2 * Math.PI);
        context.fill();
        context.restore();
        for (var i = 0; i < info.length; i++) {
          context.save();
          context.beginPath();
          context.fillStyle = "#000";
          context.font = "10px 微软雅黑";
          context.textBaseline = "middle";
          context.rotate(i * step + step / 2);
          context.fillText(info[i], 160, 0);
          context.restore();
        }
      }
      function getColor() {
	var r = Math.floor(Math.random()*19*10+60);    //生成随机颜色
	var g = Math.floor(Math.random()*19*10+60);
	var b = Math.floor(Math.random()*18*10+70);
        return "rgb(" + r + "," + g + "," + b + ")";
      }
    </script>
  </head>
  
  <body>
    <div>
      <canvas id="canvas" width="500px" height="500px"></canvas>
      <button id="btn" style="margin-top:20px;">let's go</button>
    </div>
  </body>

</html>

标签： js转盘

上面是“利用js做一个大转盘代码（旅游盲盒）”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_13534.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！