Canvas + jqueryRotate实现抽奖大转盘

最新推荐文章于 2024-09-08 09:19:09 发布
timelessmemoryli
最新推荐文章于 2024-09-08 09:19:09 发布
阅读量774
点赞数
分类专栏： html+css/html5 js 文章标签： canvas juqeryRotate 抽奖转盘
本文链接：https://blog.csdn.net/u014788227/article/details/71711460
版权
js 同时被 2 个专栏收录
31 篇文章 0 订阅
订阅专栏
html+css/html5
14 篇文章 0 订阅
订阅专栏
<!DOCTYPE html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas + jqueeryRotate</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryRotate.js"></script>
<style type="text/css">
	.gameContainer .turn-plate {
	  background-color: #FF9807;
	  border-radius: 20rem;
	  width: 40rem;
	  height: 40rem;
	  position:relative;
	  margin: 0 auto;
	}

	.gameContainer .turn-plate canvas.canvas {
	  width: 100%;
	  height: 100%;
	}

	.gameContainer .turn-plate img.pointer {
	  position:absolute;
	  width:31.5%;
	  height:42.5%;
	  left:34.6%;
	  top:23%;
	}
</style>
<script type="text/javascript">
	var config, randomAward;

	$("title")[0].innerText = "一點成金 點數樂翻天";

	randomAward = function(n, m) {
	  return Math.floor(Math.random() * (m - n + 1) + n);
	};

	config = {
	  awards: ["1倍", "4倍", "3倍", "2倍", "1倍", "4倍", "3倍", "2倍"],
	  blockBgColor: ["#EA5703", "#BF0008", "#FACA00", "#460000", "#EA5703", "#BF0008", "#FACA00", "#460000"],
	  borderRadius: 190,
	  outsideRadius: 178,
	  insideRadius: 58,
	  textRadius: 118,
	  splitBorderAngle: Math.PI / 60,
	  itemAngle: Math.PI * 7 / 30,
	  startAngle: Math.PI * 7 / 30 / 2,
	  textColor: "#FDFFEC",
	  boderColor: "#FEF7C0",
	  rotateTime: 8000,
	  rotateCount: 5
	};

	$(function() {
	  var drawRouletteWheel, isRotate, rotatePlate;
	  isRotate = false;
	  rotatePlate = function(target, tip) {
	    var angles;
	    if (target > 6) {
	      angles = -(target - 6) * (360 / config.awards.length);
	    } else {
	      angles = (6 - target) * (360 / config.awards.length);
	    }
	    $('#wheelcanvas').stopRotate();
	    return $('#wheelcanvas').rotate({
	      angle: 0,
	      animateTo: angles + config.rotateCount * 360,
	      duration: config.rotateTime,
	      callback: function() {
	        alert(tip);
	        return isRotate = false;
	      }
	    });
	  };
	  $('.pointer').click(function() {
	    var target;
	    if (isRotate) {
	      return;
	    }
	    isRotate = true;
	    target = randomAward(1, config.awards.length);
	    return rotatePlate(target, config.awards[target - 1]);
	  });
	  drawRouletteWheel = function() {
	    var angle, arc, award, canvas, ctx, i, number, text, word, _i, _len, _ref, _results;
	    canvas = document.getElementById("wheelcanvas");
	    if (canvas.getContext) {
	      arc = config.itemAngle;
	      ctx = canvas.getContext("2d");
	      ctx.clearRect(0, 0, 422, 422);
	      _ref = config.awards;
	      _results = [];
	      for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
	        award = _ref[i];
	        angle = config.startAngle + i * arc + (i + 1) * config.splitBorderAngle;
	        ctx.fillStyle = config.boderColor;
	        ctx.beginPath();
	        ctx.moveTo(211, 211);
	        ctx.arc(211, 211, config.borderRadius, config.startAngle + i * (config.itemAngle + config.splitBorderAngle), config.startAngle + i * (config.itemAngle + config.splitBorderAngle) + config.splitBorderAngle, false);
	        ctx.fill();
	        ctx.beginPath();
	        ctx.arc(211, 211, config.borderRadius, angle, angle + arc, false);
	        ctx.arc(211, 211, config.outsideRadius, angle + arc, angle, true);
	        ctx.fill();
	        ctx.fillStyle = config.blockBgColor[i];
	        ctx.beginPath();
	        ctx.arc(211, 211, config.outsideRadius, angle, angle + arc, false);
	        ctx.arc(211, 211, config.insideRadius, angle + arc, angle, true);
	        ctx.fill();
	        ctx.save();
	        ctx.fillStyle = config.textColor;
	        text = config.awards[i];
	        ctx.translate(211 + Math.cos(angle + arc / 2) * config.textRadius, 211 + Math.sin(angle + arc / 2) * config.textRadius);
	        ctx.rotate(angle + arc / 2 + Math.PI / 2);
	        number = text.substring(0, 1);
	        word = text.substring(1);
	        ctx.font = '900 60px Microsoft YaHei';
	        ctx.fillText(number, -ctx.measureText(number).width, 0);
	        ctx.font = '600 30px Microsoft YaHei';
	        ctx.fillText(word, 0, 0);
	        _results.push(ctx.restore());
	      }
	      return _results;
	    }
	  };
	  return drawRouletteWheel();
	});
</script>
</head>
<body>
    <div class="gameContainer">
	    <div class="turn-plate">
	        <canvas class="canvas" id="wheelcanvas" width="422px" height="422px"></canvas>
	        <img class="pointer" src="images/turnplate-pointer.png"/>
	    </div>
	</div>
</body>
</html>
以上js是由coffee编译而成，coffee源文件如下
$("title")[0].innerText = "一點成金 點數樂翻天"

randomAward = (n, m)->
  return Math.floor(Math.random() * (m - n + 1) + n)

config =
  awards : ["1倍", "4倍", "3倍", "2倍", "1倍", "4倍", "3倍", "2倍"]
  blockBgColor : ["#EA5703", "#BF0008", "#FACA00", "#460000","#EA5703", "#BF0008", "#FACA00", "#460000"]
  borderRadius: 190
  outsideRadius: 178
  insideRadius: 58
  textRadius: 118
  splitBorderAngle : Math.PI / 60
  itemAngle : Math.PI * 7 / 30
  startAngle: Math.PI * 7 / 30 / 2
  textColor: "#FDFFEC"
  boderColor : "#FEF7C0"
  rotateTime: 8000
  rotateCount: 5

$(()->
  isRotate = false

  rotatePlate = (target, tip)->
    if target > 6 then angles = -(target - 6) * (360 / config.awards.length) else angles = (6 - target) * (360 / config.awards.length)

    $('#wheelcanvas').stopRotate()

    $('#wheelcanvas').rotate({
      angle : 0
      animateTo : angles + config.rotateCount * 360
      duration : config.rotateTime
      callback : ()->
        alert(tip)
        isRotate = false
    })

  $('.pointer').click(()->
    if isRotate
      return
    isRotate = true
    target = randomAward(1, config.awards.length)
    rotatePlate(target, config.awards[target - 1])
  )

  drawRouletteWheel = ()->
    canvas = document.getElementById "wheelcanvas"

    if canvas.getContext
      arc = config.itemAngle

      ctx = canvas.getContext "2d"
      ctx.clearRect(0, 0, 422, 422)

      for award, i in config.awards
        angle = config.startAngle + i * arc + (i + 1) * config.splitBorderAngle

        ctx.fillStyle = config.boderColor
        ctx.beginPath()
        ctx.moveTo(211, 211)
        ctx.arc(211, 211, config.borderRadius, config.startAngle + i * (config.itemAngle + config.splitBorderAngle), config.startAngle + i * (config.itemAngle + config.splitBorderAngle) + config.splitBorderAngle, false)
        ctx.fill()

        ctx.beginPath()
        ctx.arc(211, 211, config.borderRadius, angle, angle + arc, false)
        ctx.arc(211, 211, config.outsideRadius, angle + arc, angle, true)
        ctx.fill()
        ctx.fillStyle = config.blockBgColor[i];

        ctx.beginPath()
        ctx.arc(211, 211, config.outsideRadius, angle, angle + arc, false)
        ctx.arc(211, 211, config.insideRadius, angle + arc, angle, true)
        ctx.fill()
        ctx.save()

        ctx.fillStyle = config.textColor
        text = config.awards[i]

        ctx.translate(211 + Math.cos(angle + arc / 2) * config.textRadius, 211 + Math.sin(angle + arc / 2) * config.textRadius)
        ctx.rotate(angle + arc / 2 + Math.PI / 2)

        number = text.substring(0,1)
        word = text.substring(1)

        ctx.font = '900 60px Microsoft YaHei'
        ctx.fillText(number, -ctx.measureText(number).width, 0)
        ctx.font = '600 30px Microsoft YaHei'
        ctx.fillText(word, 0, 0)

        ctx.restore()

  drawRouletteWheel()
)