2024年12月14日 建站教程
<!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" >let's go</button>
</div>
</body>
</html>
本文链接：http://so.lmcjl.com/news/19561/