<!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()
)
Canvas + jqueryRotate实现抽奖大转盘
猜你喜欢
转载自blog.csdn.net/u014788227/article/details/71711460
周排行