码，如以下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>购买大厅</title>
<%@include file="../../include/include.jsp"%>
<%@include file="../../include/main.jsp"%>
<body style="background-color: #514f4f;overflow: hidden;">
<div class="nav" style="height:43px;line-height:43px;background-color: #CC0000;display:block;"><p>幸运大转盘</p>
<span class="bank"><a href="javascript:window.history.go(-1);" class="hand">返回</a></span>
</div>
<div style="width: 100%;padding-top:50px;">
<p style="margin:0px auto;line-height:20px;padding:5px 5px;width:95%;color: #747373;font-size:14px;background-color: #dedede;">游戏规则：每次转动消费10积分,中奖后系统记录,客服会与您第一时间取得联系！</p>
</div>
<div style="padding:5px 0px 0px 15px;">
<p><span style="font-size:16px;color:#fff;position: relative;top:10px;">当前积分1000</span> <input id="spinBtn" type="button" onclick="spin();" value="開始抽奖" class="luckBtn" style="margin-top: 3px;"></p>
</div>
<div style="width: 100%;text-align: center;margin:0px auto;">
<canvas id="wheelcanvas" width="500" height="500"></canvas>
</div>
<script type="application/javascript">
var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB",
"#2E2C75", "#673A7E", "#CC0071", "#F80120",
"#F35B20", "#FB9A00", "#FFCC00", "#FEF200"];
var restaraunts = ["X2", "X4", "X5", "继续努力","双色球一注","5000元现金","iphone6一台","苹果笔记本一台"];
var startAngle = 0;
var arc = Math.PI / 4;
var spinTimeout = null;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;
var winWidth=500;
var ctx;
function draw() {
drawRouletteWheel();
}
var windowWidth=0;
if((document.body) && (document.body.clientWinWidth)){
windowWidth = document.body.clientWinWidth;
}else if(window.innerWidth){
windowWidth = window.innerWidth;
}
if(windowWidth!=0&&windowWidth<400){
$("#wheelcanvas").width(320);
$("#wheelcanvas").height(320);
}
function drawRouletteWheel() {
var canvas = document.getElementById("wheelcanvas");
if (canvas.getContext) {
var outsideRadius = winWidth*0.4;
var textRadius = winWidth*160/500;
var insideRadius = winWidth*125/500;
ctx = canvas.getContext("2d");
ctx.clearRect(0,0,winWidth,winWidth);
// var pic = new Image();
// pic.width=500;
// pic.onload=function(){
// ctx.drawImage(pic,0,0,500,500);
// }
<%-- pic.src ="<%=basePath%>/resources/images/touch/pan.gif"; --%>
ctx.strokeStyle = "#CFCFCF";
ctx.lineWidth = 2;
ctx.font = 'bold 16px sans-serif';
ctx.fillStyle = "#fff";
ctx.arc(winWidth/2, winWidth/2, outsideRadius+15,0,2*Math.PI,true);
ctx.stroke();
ctx.fill();
ctx.save();
for(var i = 0; i < 8; i++) {
var angle = startAngle + i * arc;
ctx.fillStyle = colors[i];
ctx.beginPath();
ctx.arc(winWidth/2, winWidth/2, outsideRadius, angle, angle + arc, false);
ctx.arc(winWidth/2, winWidth/2, 10, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
ctx.save();
/* ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 0;
ctx.shadowColor = "rgb(220,220,220)";*/
ctx.fillStyle = "#FFF";
ctx.translate(winWidth/2 + Math.cos(angle + arc / 2) * textRadius, winWidth/2 + Math.sin(angle + arc / 2) * textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
var text = restaraunts[i];
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
ctx.restore();
}
//Arrow
ctx.fillStyle = "white";
ctx.beginPath();
ctx.moveTo(winWidth/2 - 4, winWidth/2 - (outsideRadius + 5));
ctx.lineTo(winWidth/2 + 4, winWidth/2 - (outsideRadius + 5));
ctx.lineTo(winWidth/2 + 4, winWidth/2 - (outsideRadius - 5));
ctx.lineTo(winWidth/2 + 9, winWidth/2 - (outsideRadius - 5));
ctx.lineTo(winWidth/2 + 0, winWidth/2 - (outsideRadius - 23));
ctx.lineTo(winWidth/2 - 9, winWidth/2 - (outsideRadius - 5));
ctx.lineTo(winWidth/2 - 4, winWidth/2 - (outsideRadius - 5));
ctx.lineTo(winWidth/2 - 4, winWidth/2 - (outsideRadius + 5));
ctx.fill();
}
}
function spin() {
$("#spinBtn").attr("disabled","true");
$("#spinBtn").css("background","grey");
spinAngleStart = Math.random() * 10 + 30;
spinTime = 0;
spinTimeTotal = Math.random() * 4 + 5 * 1000;
rotateWheel();
}
function rotateWheel() {
spinTime += 20;
if(spinTime >= spinTimeTotal) {
stopRotateWheel();
return;
}
var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
startAngle += (spinAngle * Math.PI / 180);
drawRouletteWheel();
spinTimeout = setTimeout('rotateWheel()', 20);
}
function stopRotateWheel() {
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
ctx.save();
ctx.font = 'bold 30px sans-serif';
var text = restaraunts[index]
ctx.fillText(text, winWidth/2 - ctx.measureText(text).width / 2, winWidth/2 + 10);
ctx.restore();
$("#spinBtn").removeAttr("disabled");
$("#spinBtn").css("background","#CC0000");
}
function easeOut(t, b, c, d) {
var ts = (t/=d)*t;
var tc = ts*t;
return b+c*(tc + -3*ts + 3*t);
}
draw();
</script>
<body>
</html>
效果例如以下：
自己在网上找到一些样例，自己改了改。用html5的canvas实现的；
也有几种思路。就是用css的border 和圆角来做的，然后用css的rotate等函数来做
还有就是jquery插件控制图片来做的
还有就是用css为了控制图像做。
有兴趣的研究。
版权声明：本文博客原创文章。博客，未经同意，不得转载。
时间： 2024-08-01 09:51:09