AWeiJie · June 3, 2021 04:33 · AWeiJie · Jan 17, 2018
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="zh-cn">

 <head>
  <meta charset="UTF-8">
  <title>HTML5 Canvas圆盘抽奖应用DEMO演示</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <style>
    * {
      padding: 0px;
      margin: 0px;
      font-size: 16px;
      font-family: "Microsoft YaHei";
    }

    .xttblog_box {
      width: 300px;
      height: 300px;
      margin: 100px auto;
      position: relative;
    }

    .xttblog_box canvas {
      position: absolute;
    }

    #xttblog {
      background-color: white;
      border-radius: 100%;
    }

    #xttblog01,
    #xttblog03 {
      left: 50px;
      top: 50px;
      z-index: 30;
    }

    #xttblog02 {
      left: 75px;
      top: 75px;
      z-index: 20;
    }

    #xttblog {
      -o-transform: transform 6s;
      -ms-transform: transform 6s;
      -moz-transform: transform 6s;
      -webkit-transform: transform 6s;
      transition: transform 6s;
      -o-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
      -moz-transform-origin: 50% 50%;
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
    }

    .taoge_btn {
      width: 60px;
      height: 60px;
      left: 120px;
      top: 120px;
      border-radius: 100%;
      position: absolute;
      cursor: pointer;
      border: none;
      background: transparent;
      outline: none;
      z-index: 40;
    }
  </style>
  <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      //旋转角度
      var angles;
      //旋转次数
      var rotNum = 0;
      //中奖公告
      var notice = null;
      //转盘初始化各样式颜色
      var color = ["#ffefbf", "#ffbb04", "#e72c2c", "#DCC722", "#f4a005", "#cb1418"];
      // 后台获取奖品替换数据
      var info = ["1", "2", " 3", " 4", " 5", " 6"];
      canvasRun();
      $('#tupBtn').bind('click', function () {
        //转盘旋转
        runCup();
        //转盘旋转过程“开始抽奖”按钮无法点击
        $('#tupBtn').attr("disabled", true);
        //“开始抽奖”按钮无法点击恢复点击
        setTimeout(function () {
          alert('中奖拉')
          $('#tupBtn').removeAttr("disabled", true);
        }, 6000);
      });

      //转盘旋转 
      function runCup() {
        var num = null
        //获取随机数0-5 取回获奖数据下标代替 此处获取获奖数据使用异步方法
        var num = parseInt(Math.random() * (5 - 0 + 0) + 0);
        // 记录旋转的次数，依次叠加旋转度数，防止往回倒转  transform属性的值必须依次增加，否则会发生倒转
        rotNum = rotNum + 1

        if(num !== null) {
          //  旋转角度 = 旋转6圈（2160度）* 已经旋转的次数 + 最少旋转的圈数（5圈）+ 每个奖品下标对应的角度
          angles = 2160 * rotNum + 1800 + 360 / info.length * (info.length - num);
        } else {
          angles = 2160 * rotNum + 1800 
        }
        var degValue = 'rotate(' + angles + 'deg' + ')';
        $('#xttblog').css('transform', degValue);
        // 如果没有获取到获奖数据继续转动
        if(num === null) {
          runCup();
        }
      }

      //绘制转盘
      function canvasRun() {
        var canvas = document.getElementById('xttblog');
        var canvas01 = document.getElementById('xttblog01');
        var canvas03 = document.getElementById('xttblog03');
        var canvas02 = document.getElementById('xttblog02');
        var ctx = canvas.getContext('2d');
        var ctx1 = canvas01.getContext('2d');
        var ctx3 = canvas03.getContext('2d');
        var ctx2 = canvas02.getContext('2d');
        createCircle();
        createCirText(); // 绘制文字
        initPoint(); // 绘制指针

        //外圆
        function createCircle() {
          var startAngle = 0; //扇形的开始弧度
          var endAngle = 0; //扇形的终止弧度
          //画一个等份扇形组成的圆形
          for (var i = 0; i < info.length; i++) {
            startAngle = Math.PI * (i / (info.length / 2) - 2 / info.length);
            endAngle = startAngle + Math.PI * (1 / (info.length / 2));

            ctx.save(); // 保存备份
            ctx.beginPath(); // 绘制两条线
            ctx.arc(150, 150, 100, startAngle, endAngle, false); // 绘制圆
            ctx.lineWidth = 120;
            if (i % 2 == 0) { // 绘制颜色
              ctx.strokeStyle = color[1];
            } else {
              ctx.strokeStyle = color[0];
            }
            ctx.stroke();
            ctx.restore();
          }
        }

        //各奖项
        function createCirText() {
          ctx.textAlign = 'start';
          ctx.textBaseline = 'middle';
          ctx.fillStyle = color[3];
          var step = 2 * Math.PI / info.length;
          for (var i = 0; i < 6; i++) {
            ctx.save();
            ctx.beginPath();
            ctx.translate(150, 150);
            ctx.rotate(i * step);
            ctx.font = " 20px Microsoft YaHei";
            ctx.fillStyle = color[3];
            ctx.fillText(info[i], -30, -100, 60); // 书写转盘文字
            ctx.font = " 14px Microsoft YaHei";
            ctx.closePath();
            ctx.restore();
          }
        }


        //箭头指针
        function initPoint() {
          //箭头指针
          ctx1.beginPath();
          ctx1.moveTo(100, 24);
          ctx1.lineTo(90, 62);
          ctx1.lineTo(110, 62);
          ctx1.lineTo(100, 24);
          ctx1.fillStyle = color[5]; // 指针颜色
          ctx1.fill();
          ctx1.closePath();
          //中间圆圈
          ctx2.beginPath();
          ctx2.arc(75, 75, 50, 0, Math.PI * 2, false); // 创建一个圆
          ctx2.fillStyle = color[2]; // 颜色
          ctx2.fill();
          ctx2.closePath();
          //中间小圆
          ctx3.beginPath();
          ctx3.arc(100, 100, 40, 0, Math.PI * 2, false);
          ctx3.fillStyle = color[5];
          ctx3.fill();
          ctx3.closePath();
          //小圆文字
          ctx3.font = "Bold 20px Microsoft YaHei";
          ctx3.textAlign = 'start';
          ctx3.textBaseline = 'middle';
          ctx3.fillStyle = color[4]; //抽奖文字颜色
          ctx3.beginPath();
          ctx3.fillText('开始', 80, 90, 40);
          ctx3.fillText('抽奖', 80, 110, 40);
          ctx3.fill();
          ctx3.closePath();
        }
      }
    });
  </script>
 </head>

 <body>
  <div class="xttblog_box">
    <canvas id="xttblog" width="300px" height="300px">抱歉！浏览器不支持。</canvas>
    <canvas id="xttblog01" width="200px" height="200px">抱歉！浏览器不支持。</canvas>
    <canvas id="xttblog03" width="200px" height="200px">抱歉！浏览器不支持。</canvas>
    <canvas id="xttblog02" width="150px" height="150px">抱歉！浏览器不支持。</canvas>
    <button id="tupBtn" class="taoge_btn"></button>
  </div>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="zh-cn">

	<head>
	<meta charset="UTF-8">
	<title>HTML5 Canvas圆盘抽奖应用DEMO演示</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<style>
	* {
	padding: 0px;
	margin: 0px;
	font-size: 16px;
	font-family: "Microsoft YaHei";
	}

	.xttblog_box {
	width: 300px;
	height: 300px;
	margin: 100px auto;
	position: relative;
	}

	.xttblog_box canvas {
	position: absolute;
	}

	#xttblog {
	background-color: white;
	border-radius: 100%;
	}

	#xttblog01,
	#xttblog03 {
	left: 50px;
	top: 50px;
	z-index: 30;
	}

	#xttblog02 {
	left: 75px;
	top: 75px;
	z-index: 20;
	}

	#xttblog {
	-o-transform: transform 6s;
	-ms-transform: transform 6s;
	-moz-transform: transform 6s;
	-webkit-transform: transform 6s;
	transition: transform 6s;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	}

	.taoge_btn {
	width: 60px;
	height: 60px;
	left: 120px;
	top: 120px;
	border-radius: 100%;
	position: absolute;
	cursor: pointer;
	border: none;
	background: transparent;
	outline: none;
	z-index: 40;
	}
	</style>
	<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
	<script>
	$(document).ready(function () {
	//旋转角度
	var angles;
	//旋转次数
	var rotNum = 0;
	//中奖公告
	var notice = null;
	//转盘初始化各样式颜色
	var color = ["#ffefbf", "#ffbb04", "#e72c2c", "#DCC722", "#f4a005", "#cb1418"];
	// 后台获取奖品替换数据
	var info = ["1", "2", " 3", " 4", " 5", " 6"];
	canvasRun();
	$('#tupBtn').bind('click', function () {
	//转盘旋转
	runCup();
	//转盘旋转过程“开始抽奖”按钮无法点击
	$('#tupBtn').attr("disabled", true);
	//“开始抽奖”按钮无法点击恢复点击
	setTimeout(function () {
	alert('中奖拉')
	$('#tupBtn').removeAttr("disabled", true);
	}, 6000);
	});

	//转盘旋转
	function runCup() {
	var num = null
	//获取随机数0-5 取回获奖数据下标代替此处获取获奖数据使用异步方法
	var num = parseInt(Math.random() * (5 - 0 + 0) + 0);
	// 记录旋转的次数，依次叠加旋转度数，防止往回倒转 transform属性的值必须依次增加，否则会发生倒转
	rotNum = rotNum + 1

	if(num !== null) {
	// 旋转角度 = 旋转6圈（2160度）* 已经旋转的次数 + 最少旋转的圈数（5圈）+ 每个奖品下标对应的角度
	angles = 2160 * rotNum + 1800 + 360 / info.length * (info.length - num);
	} else {
	angles = 2160 * rotNum + 1800
	}
	var degValue = 'rotate(' + angles + 'deg' + ')';
	$('#xttblog').css('transform', degValue);
	// 如果没有获取到获奖数据继续转动
	if(num === null) {
	runCup();
	}
	}

	//绘制转盘
	function canvasRun() {
	var canvas = document.getElementById('xttblog');
	var canvas01 = document.getElementById('xttblog01');
	var canvas03 = document.getElementById('xttblog03');
	var canvas02 = document.getElementById('xttblog02');
	var ctx = canvas.getContext('2d');
	var ctx1 = canvas01.getContext('2d');
	var ctx3 = canvas03.getContext('2d');
	var ctx2 = canvas02.getContext('2d');
	createCircle();
	createCirText(); // 绘制文字
	initPoint(); // 绘制指针

	//外圆
	function createCircle() {
	var startAngle = 0; //扇形的开始弧度
	var endAngle = 0; //扇形的终止弧度
	//画一个等份扇形组成的圆形
	for (var i = 0; i < info.length; i++) {
	startAngle = Math.PI * (i / (info.length / 2) - 2 / info.length);
	endAngle = startAngle + Math.PI * (1 / (info.length / 2));

	ctx.save(); // 保存备份
	ctx.beginPath(); // 绘制两条线
	ctx.arc(150, 150, 100, startAngle, endAngle, false); // 绘制圆
	ctx.lineWidth = 120;
	if (i % 2 == 0) { // 绘制颜色
	ctx.strokeStyle = color[1];
	} else {
	ctx.strokeStyle = color[0];
	}
	ctx.stroke();
	ctx.restore();
	}
	}

	//各奖项
	function createCirText() {
	ctx.textAlign = 'start';
	ctx.textBaseline = 'middle';
	ctx.fillStyle = color[3];
	var step = 2 * Math.PI / info.length;
	for (var i = 0; i < 6; i++) {
	ctx.save();
	ctx.beginPath();
	ctx.translate(150, 150);
	ctx.rotate(i * step);
	ctx.font = " 20px Microsoft YaHei";
	ctx.fillStyle = color[3];
	ctx.fillText(info[i], -30, -100, 60); // 书写转盘文字
	ctx.font = " 14px Microsoft YaHei";
	ctx.closePath();
	ctx.restore();
	}
	}


	//箭头指针
	function initPoint() {
	//箭头指针
	ctx1.beginPath();
	ctx1.moveTo(100, 24);
	ctx1.lineTo(90, 62);
	ctx1.lineTo(110, 62);
	ctx1.lineTo(100, 24);
	ctx1.fillStyle = color[5]; // 指针颜色
	ctx1.fill();
	ctx1.closePath();
	//中间圆圈
	ctx2.beginPath();
	ctx2.arc(75, 75, 50, 0, Math.PI * 2, false); // 创建一个圆
	ctx2.fillStyle = color[2]; // 颜色
	ctx2.fill();
	ctx2.closePath();
	//中间小圆
	ctx3.beginPath();
	ctx3.arc(100, 100, 40, 0, Math.PI * 2, false);
	ctx3.fillStyle = color[5];
	ctx3.fill();
	ctx3.closePath();
	//小圆文字
	ctx3.font = "Bold 20px Microsoft YaHei";
	ctx3.textAlign = 'start';
	ctx3.textBaseline = 'middle';
	ctx3.fillStyle = color[4]; //抽奖文字颜色
	ctx3.beginPath();
	ctx3.fillText('开始', 80, 90, 40);
	ctx3.fillText('抽奖', 80, 110, 40);
	ctx3.fill();
	ctx3.closePath();
	}
	}
	});
	</script>
	</head>

	<body>
	<div class="xttblog_box">
	<canvas id="xttblog" width="300px" height="300px">抱歉！浏览器不支持。</canvas>
	<canvas id="xttblog01" width="200px" height="200px">抱歉！浏览器不支持。</canvas>
	<canvas id="xttblog03" width="200px" height="200px">抱歉！浏览器不支持。</canvas>
	<canvas id="xttblog02" width="150px" height="150px">抱歉！浏览器不支持。</canvas>
	<button id="tupBtn" class="taoge_btn"></button>
	</div>
	</body>

	</html>